JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<!--
  Welcome to Tailwind Play, the official Tailwind CSS playground!

  Everything here works just like it does when you're running Tailwind locally
  with a real build pipeline. You can customize your config file, use features
  like `@apply`, or even add third-party plugins.

  Feel free to play with this example if you're just learning, or trash it and
  start from scratch if you know enough to be dangerous. Have fun!
-->
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 bg-[url('https://images.pexels.com/photos/2387533/pexels-photo-2387533.jpeg')] bg-cover bg-center py-6 sm:py-12">
  <div class="flex rounded-full bg-white/10 px-1 py-1 shadow-xl ring-1 ring-gray-100/60 backdrop-blur-md sm:mx-auto sm:max-w-lg">
    <button class="mx-auto max-w-md rounded-full p-2 text-xs text-white hover:bg-black">
      <svg class="h-8 w-8" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M32 50.5C32 54.366 27.9706 57.5 23 57.5C18.0294 57.5 14 54.366 14 50.5C14 46.634 18.0294 43.5 23 43.5C27.9706 43.5 32 46.634 32 50.5Z" stroke="#C2CCDE" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M32 50.5L32 14.5" stroke="#C2CCDE" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M66 58.5C66 62.366 61.9706 65.5 57 65.5C52.0294 65.5 48 62.366 48 58.5C48 54.634 52.0294 51.5 57 51.5C61.9706 51.5 66 54.634 66 58.5Z" stroke="#C2CCDE" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M66 58.5L66 22.5" stroke="#C2CCDE" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M32 14.5L66 22.5" stroke="#C2CCDE" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M32 24.5L66 32.5" stroke="#C2CCDE" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
    <button class="mx-auto max-w-md rounded-full p-2 text-xs text-white hover:bg-black hover:bg-opacity-60...