JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <div class="relative bg-white px-6 pb-8 pt-10 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="flex flex-col gap-4">
      <div class="flex gap-4">
        <div class="flex w-1/2 items-center justify-center rounded-xl border p-4 text-center ring-2 ring-gray-800">Predefined components</div>
        <div class="flex w-1/2 items-center justify-center rounded-xl border p-4 text-center ring-2 ring-gray-800">Utility-first classes</div>
      </div>
      <div class="flex gap-8">
        <div class="flex w-1/2 items-center justify-center border p-4 text-center">Predefined components</div>
        <div class="flex w-1/2 items-center justify-center border p-4 text-center">Responsive design with utility classes</div>
      </div>
      <div class="flex gap-8">
        <div class="flex w-1/2 items-center justify-center border p-4 text-center">Predefined components</div>
        <div class="flex w-1/2 items-center justify-center border p-4 text-center">Tailor-made themes through customization options configuration</div>
      </div>
    </div>
  </div>
</div>