Tailwind CSS Button group

<div class="inline-flex rounded-md shadow-sm" role="group">
  <button type="button" class="py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
    Profile
  </button>
  <button type="button" class="py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
    Settings
  </button>
  <button type="button" class="py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
    Messages
  </button>
</div>

Source: flowbite.com

Similar codes

3 votes275 views1 answer
Nav b5
Html
0 vote246 views1 answer
HOW TO SHOW A ERROR MESSAGE TO USERS IN HTML ON WEBSITE
Html
13 votes289 views1 answer
Download im<a href="the/name/of/your/file.x" download>ages html code
Html
0 vote207 views1 answer
How to embed applet in html
Html
0 vote256 views1 answer
Html skype link
Html
2 votes283 views1 answer
Align center inner div using bootstrap
Html
0 vote260 views1 answer
Rmarkdown revealjs_presentation remove black border to images
Html
1 vote227 views3 answers
Canvas draw rectangle
Html
14 votes284 views3 answers
Accordion html
Html
5 votes256 views5 answers
Table in README
Html