TailwindCSS STimulus Components

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
<script src="https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.js"></script>
<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
  <div class="flex items-center flex-no-shrink text-white mr-6">
    <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>


  <div class="inline-block text-sm px-4 py-2 leading-none rounded no-underline text-white hover:text-grey-darker hover:bg-white mt-0">
    <div class="relative" data-controller="dropdown">
      <div data-action="click->dropdown#toggle click@window->dropdown#hide" role="button" class="inline-block select-none">
        <span class="appearance-none flex items-center inline-block">
          <span>Dropdown Example</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="h-4 w-4"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
        </span>
      </div>
      <div data-target="dropdown.menu" class="absolute pin-r mt-2 hidden">
        <div class="bg-white shadow rounded border overflow-hidden w-32">
          <a href="#" class='no-underline block pl-8 py-3 text-grey-darkest bg-white hover:bg-grey-lighter whitespace-no-wrap'>Account</a>
          <a href="#" class='no-underline block pl-8 py-3 text-grey-darkest bg-white...

Babel + JSX

const application = Stimulus.Application.start();

application.register('dropdown', TailwindcssStimulusComponents.Dropdown)
application.register('modal', TailwindcssStimulusComponents.Modal)
application.register('tabs', TailwindcssStimulusComponents.Tabs)