TailwindTemplates

Recently added

Biings Tabs Rounded

Copied!

                    
                         <ul class="grid grid-flow-col text-center text-gray-500 bg-gray-100 rounded-lg p-1">
    <li>
      <a href="#page1" class="flex justify-center py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center bg-white rounded-lg shadow text-indigo-900 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center py-4">Settings</a>
    </li>
  </ul>
                    
                

Biings Hanging Tabs

Copied!

                    
                         <ul class="grid grid-flow-col text-center text-gray-500">
    <li>
      <a href="#page1" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center border-t-4 text-indigo-600 border-indigo-600 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Settings</a>
    </li>
  </ul>
                    
                

Biings Tabs

Copied!

                    
                         <ul class="grid grid-flow-col text-center border-b border-gray-200 text-gray-500">
    <li>
      <a href="#page1" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Settings</a>
    </li>
  </ul>
                    
                

Biings input field: Required

Copied!

                    
                         <label
  for="input1"
  class="p-4 text-gray-800 relative focus-within:text-purple-800 bg-white transition-colors rounded-md block border-2 border-gray-200 focus-within:border-purple-600"
>
  <p class="mb-2 ">Name</p>
  <input
    type="text"
    id="input1"
    placeholder="Your name..."
    class="w-full bg-transparent focus:outline-none text-gray-700"
  />
  <div class="absolute left-0 inset-y-0 flex items-center -ml-2 mt-8">
  <span class="flex h-3 w-3 relative">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
  </div>
</span>
</label>
                    
                

Biings input field: Error

Copied!

                    
                         <label
  for="input1"
  class="p-4 text-gray-800 focus-within:text-purple-800 caret-red-500 bg-white transition-colors rounded-md block border-2 border-red-400 focus-within:border-red-600"
>
  <p class="mb-2 ">Name</p>
  <input
    type="text"
    id="input1"
    placeholder="Your name..."
    class="w-full bg-transparent focus:outline-none text-gray-700"
  />
</label>
                    
                

Biings Input Field

Copied!

                    
                         <label
    for="input1"
    class="p-4 text-gray-800 focus-within:text-purple-800 bg-white transition-colors rounded-md block border-2 border-gray-200 focus-within:border-purple-600"
  >
    <p class="mb-2 ">Name</p>
    <input
      type="text"
      id="input1"
      placeholder="Your name..."
      class="w-full bg-transparent focus:outline-none text-gray-700"
    />
  </label>
                    
                

Biings Input with 1 icon

Copied!

                    
                         <div class="relative">
  <input
    class="appearance-none border-2 pl-10 border-gray-300 hover:border-gray-400 transition-colors rounded-md w-full py-2 px-3 text-gray-800 leading-tight focus:outline-none focus:ring-purple-600 focus:border-purple-600 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Search..."
  />
  <div class="absolute left-0 inset-y-0 flex items-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 ml-3 text-gray-400 hover:text-gray-500"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
      />
    </svg>
  </div>
</div>
                    
                

Biings Input with 2 icons

Copied!

                    
                         <div class="relative">
    <input
      class="appearance-none border-2 pl-10 border-gray-300 hover:border-gray-400 transition-colors rounded-md w-full py-2 px-3 text-gray-800 leading-tight focus:outline-none focus:ring-purple-600 focus:border-purple-600 focus:shadow-outline"
      id="username"
      type="text"
      placeholder="Search..."
    />
    <div class="absolute right-0 inset-y-0 flex items-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="-ml-1 mr-3 h-5 w-5 text-gray-400 hover:text-gray-500"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M6 18L18 6M6 6l12 12"
        />
      </svg>
    </div>

    <div class="absolute left-0 inset-y-0 flex items-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 ml-3 text-gray-400 hover:text-gray-500"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
        />
      </svg>
    </div>
  </div>
                    
                

Orbit Badges: Success

Copied!

                    
                         <!-- Light -->
<div class="flex items-start space-x-3">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-green-900 bg-green-100 border-green-300">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-green-900 bg-green-100 border-green-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>  
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-green-900 bg-green-100 border-green-300">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-green-900 bg-green-100 border-green-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>

<!-- Dark -->
<div class="flex items-start space-x-3 mt-6">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-white bg-green-600 border-green-600">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-green-600 border-green-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg> 
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-green-600 border-green-600">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-green-600 border-green-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>
                    
                

Orbit Badges: Critical

Copied!

                    
                         <!-- Light -->
<div class="flex items-start space-x-3">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-red-700 bg-red-100 border-red-300">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-red-700 bg-red-100 border-red-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>  
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-red-700 bg-red-100 border-red-300">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-red-700 bg-red-100 border-red-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>

<!-- Dark -->
<div class="flex items-start space-x-3 mt-6">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-white bg-red-600 border-red-600">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-red-600 border-red-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg> 
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-red-600 border-red-600">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-red-600 border-red-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>