How to Use TailView UI

# Add to your Gemfile
gem "tailwindcss-rails"

# Install and setup
rails tailwindcss:install

Browse the components in this app and copy the HTML you need:

• ✓ Visit any component page (e.g., /buttons)
• ✓ Copy the HTML code from the examples
• ✓ Paste into your Rails views
• ✓ Customize colors and styles as needed

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Click me
</button>

<div class="bg-green-50 border border-green-200 rounded-lg p-4">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="ml-3">
      <h3 class="text-sm font-medium text-green-800">Success!</h3>
      <div class="mt-2 text-sm text-green-700">
        <p>Your action was completed successfully.</p>
      </div>
    </div>
  </div>
</div>

<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">Card Title</h3>
  <p class="text-gray-600 mb-4">This is a simple card component with some content.</p>
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
    Action Button
  </button>
</div>

# Add to your Gemfile
gem "view_component"

# Install
bundle install

# In your view
<%= render AlertComponent.new(
  variant: :success,
  title: "Success!",
  message: "Your action was completed successfully.",
  dismissible: true
) %>

# With custom classes
<%= render AlertComponent.new(
  variant: :error,
  message: "Something went wrong",
  class: "mb-4 custom-alert"
) %>

<!-- HTML with Stimulus controller -->
<div data-controller="alert" data-alert-auto-dismiss-value="5000">
  <%= render AlertComponent.new(
    variant: :info,
    message: "This alert will auto-dismiss in 5 seconds"
  ) %>
</div>

// app/javascript/controllers/custom_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { 
    message: String,
    timeout: Number 
  }

  connect() {
    if (this.timeoutValue > 0) {
      setTimeout(() => {
        this.element.remove()
      }, this.timeoutValue)
    }
  }

  dismiss() {
    this.element.remove()
  }
}

<!-- app/views/dashboard/index.html.erb -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Welcome Alert -->
  <%= render AlertComponent.new(
    variant: :success,
    title: "Welcome back!",
    message: "You have 3 new notifications.",
    dismissible: true
  ) %>

  <!-- Stats Cards -->
  <div class="grid md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow-md p-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Total Users</h3>
      <p class="text-3xl font-bold text-blue-600">1,234</p>
    </div>
    <!-- More cards... -->
  </div>

  <!-- Action Buttons -->
  <div class="flex gap-4">
    <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
      Add User
    </button>
    <button class="bg-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-300 transition-colors">
      Export Data
    </button>
  </div>
</div>

<!-- app/views/users/new.html.erb -->
<%= form_with model: @user, local: true, class: "space-y-6" do |form| %>
  <!-- Error Alert -->
  <% if @user.errors.any? %>
    <%= render AlertComponent.new(
      variant: :error,
      title: "Please fix the following errors:",
      list_items: @user.errors.full_messages
    ) %>
  <% end %>

  <!-- Form Fields -->
  <div>
    <%= form.label :name, class: "block text-sm font-medium text-gray-700 mb-1" %>
    <%= form.text_field :name, 
        class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" %>
  </div>

  <!-- Submit Button -->
  <div class="flex justify-end">
    <%= form.submit "Create User", 
        class: "bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors" %>
  </div>
<% end %>