Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<body class="bg-white dark:bg-gray-950">

<section class="bg-gray-50 dark:bg-gray-900 py-12">

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm
                border border-gray-200 dark:border-gray-700 p-6">

<input
        class="w-full bg-gray-50 dark:bg-gray-700
               border border-gray-300 dark:border-gray-600
               text-gray-900 dark:text-gray-100
               placeholder-gray-400 dark:placeholder-gray-500
               rounded-lg px-3 py-2
               focus:outline-none focus:ring-2
               focus:ring-blue-500 dark:focus:ring-blue-400"
        placeholder="Enter text..."
      />

<div class="flex gap-3 mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
                       text-white px-4 py-2 rounded-lg font-medium transition-colors">
          Primary
        </button>
        <button class="bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600
                       text-gray-700 dark:text-gray-200
                       border border-gray-300 dark:border-gray-600
                       px-4 py-2 rounded-lg font-medium transition-colors">
          Secondary
        </button>
      </div>
    </div>
  </section>
</body>