Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="p-4 m-2 mt-8 px-6 py-3">
  
  
  
  
  
</div>

<button class="bg-blue-500 text-white hover:bg-blue-700 border border-blue-300">
  Click me
</button>

<p class="text-sm md:text-base lg:text-lg xl:text-xl">
  Grows with viewport width
</p>

<input
  class="border border-gray-300
         focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200
         disabled:opacity-50 disabled:cursor-not-allowed"
  type="text"
  placeholder="Type here"
/>

<div class="bg-white dark:bg-gray-900 md:hover:shadow-xl transition-shadow">
  Combined variants
</div>