Create a modal with the HTML dialog element, Tailwind and Stimulus

buttons.css

@layer components {
  .btn {
    @apply inline-flex items-center justify-center;
    @apply px-4 py-2;
    @apply text-sm font-medium leading-5 text-white cursor-pointer;
    @apply border border-transparent rounded-md shadow-sm;
    @apply transition duration-150 ease-in-out;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-wait;
  }

 .btn-blue {
    @apply btn;
    @apply bg-blue-600 focus:ring-blue-500 hover:bg-blue-700 active:bg-blue-700;
  }

 .btn-outline {
    @apply btn;
    @apply bg-white border-gray-300;
    @apply text-gray-700 focus:ring-gray-500 hover:bg-gray-50;
  } 
}

form.css

@layer components {
  label {
    @apply text-sm font-medium text-gray-700;
  }

  input[type="text"] {
    @apply block w-full border-gray-300 rounded-md shadow-sm sm:max-w-md sm:text-sm;
    @apply focus:ring-blue-500 focus:border-blue-500;
  }
}

modal.html.erb

<div data-controller="modal">
  <button class="btn-outline" data-action="modal#open">Open modal</button>

  <dialog data-modal-target="modal" class="p-0 backdrop:bg-gray-400 backdrop:bg-opacity-50 open:animate-fade-in open:backdrop:animate-fade-in">

    <button type="button" class="absolute top-4 right-4" data-action="modal#close">X</button>

    <h1 class="p-4">Reset your password</h1>

    <hr class="mb-4">

    <form class="p-4 space-y-4" data-modal-target="form">
      <label>Email</label>
      <input type="text">

      <button type="button" data-action="modal#close" class="btn-outline">Close</button>
      <button type="button" class="btn-blue">Reset Password</button>
    </form>

  </dialog>
</div>

modal_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["modal", "form"]

  open(event) {
    event.preventDefault();

    this.modalTarget.showModal();

    this.modalTarget.addEventListener('click', (e) => this._backdropClick(e));
  }

  close(event) {
    event.preventDefault();

    this.modalTarget.close();

    this.formTarget.reset()
  }

  _backdropClick(event) {
    event.target === this.modalTarget && this.close(event)
  }
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  // ...
  theme: {
    extend: {
      keyframes: {
        "fade-in": {
          '0%': { opacity: '0%' },
          '100%': { opacity: '100%' },
        }
      },
      animation: {
        "fade-in": 'fade-in 0.5s ease-in-out',
      } 
    }
  }
}

Tutorial