Elysia Tools
Navegação
Frameworks CSS
Exemplos do TailUI
Exemplos de componentes do framework CSS TailUI e padrões de UI
Exemplos
Entradas desta coleção
CódigohtmlSimples
TailUI Hello World
Configuração básica do TailUI e exemplo Hello World com estilização de componentes
Dificuldade
2/10
Tempo estimado
10 min
Etiquetas
tailui, css, components
Pré-requisitos
Basic HTML knowledge
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailUI Hello World</title>
<!-- TailUI CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailui@latest/dist/tailui.min.css" rel="stylesheet">
<!-- Or use local installation -->
<!-- <link href="/path/to/tailui.css" rel="stylesheet"> -->
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- TailUI Card Component -->
<div class="tu-card max-w-md mx-auto">
<div class="tu-card-header">
<h1 class="tu-card-title text-2xl font-bold text-gray-900">
Hello, TailUI!
</h1>
<p class="tu-card-description text-gray-600 mt-2">
Welcome to the TailUI framework
</p>
</div>
<div class="tu-card-body">
<p class="tu-text tu-text-lg mb-4">
This is a basic example using TailUI components.
</p>
<!-- TailUI Button -->
<button class="tu-btn tu-btn-primary tu-btn-lg w-full">
Get Started
</button>
</div>
</div>
<!-- Grid Layout -->
<div class="tu-grid tu-grid-cols-3 gap-4 mt-8">
<div class="tu-card tu-card-compact">
<div class="tu-card-body text-center">
<div class="tu-icon tu-icon-4xl tu-icon-blue mb-2">
🎨
</div>
<h3 class="tu-card-title text-sm">Design</h3>
<p class="tu-card-description text-xs">Beautiful components</p>
</div>
</div>
<div class="tu-card tu-card-compact">
<div class="tu-card-body text-center">
<div class="tu-icon tu-icon-4xl tu-icon-green mb-2">
⚡
</div>
<h3 class="tu-card-title text-sm">Fast</h3>
<p class="tu-card-description text-xs">Optimized performance</p>
</div>
</div>
<div class="tu-card tu-card-compact">
<div class="tu-card-body text-center">
<div class="tu-icon tu-icon-4xl tu-icon-purple mb-2">
🔧
</div>
<h3 class="tu-card-title text-sm">Customizable</h3>
<p class="tu-card-description text-xs">Easy to modify</p>
</div>
</div>
</div>
</div>
<!-- TailUI JS (optional, for interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/tailui@latest/dist/tailui.min.js"></script>
</body>
</html>CódigohtmlIntermediário
TailUI Form Components
Exemplos completos de formulários com validação usando componentes TailUI
Dificuldade
5/10
Tempo estimado
20 min
Etiquetas
tailui, forms, validation
Pré-requisitos
Basic HTML and TailUI knowledge
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailUI Form Components</title>
<link href="https://cdn.jsdelivr.net/npm/tailui@latest/dist/tailui.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-2xl">
<h2 class="tu-text tu-text-3xl tu-font-bold mb-6">Contact Form</h2>
<!-- Basic Form -->
<form class="tu-form">
<!-- Text Input -->
<div class="tu-form-group">
<label for="name" class="tu-form-label">Full Name</label>
<input
type="text"
id="name"
class="tu-form-input"
placeholder="Enter your full name"
required
>
<span class="tu-form-text tu-form-text-helper">
Please enter your first and last name
</span>
</div>
<!-- Email Input -->
<div class="tu-form-group">
<label for="email" class="tu-form-label">Email Address</label>
<div class="tu-input-group">
<span class="tu-input-group-text">@</span>
<input
type="email"
id="email"
class="tu-form-input"
placeholder="[email protected]"
required
>
</div>
<span class="tu-form-text tu-form-text-error hidden">
Please enter a valid email address
</span>
</div>
<!-- Select Dropdown -->
<div class="tu-form-group">
<label for="country" class="tu-form-label">Country</label>
<select id="country" class="tu-form-select">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
</select>
</div>
<!-- Textarea -->
<div class="tu-form-group">
<label for="message" class="tu-form-label">Message</label>
<textarea
id="message"
class="tu-form-textarea"
rows="4"
placeholder="Type your message here..."
></textarea>
<span class="tu-form-text tu-form-text-helper">
<span id="charCount">0</span> / 500 characters
</span>
</div>
<!-- Radio Group -->
<div class="tu-form-group">
<label class="tu-form-label">Preferred Contact Method</label>
<div class="tu-radio-group">
<label class="tu-radio-label">
<input type="radio" name="contact" value="email" class="tu-radio" checked>
<span class="tu-radio-text">Email</span>
</label>
<label class="tu-radio-label">
<input type="radio" name="contact" value="phone" class="tu-radio">
<span class="tu-radio-text">Phone</span>
</label>
<label class="tu-radio-label">
<input type="radio" name="contact" value="post" class="tu-radio">
<span class="tu-radio-text">Post Mail</span>
</label>
</div>
</div>
<!-- Checkbox Group -->
<div class="tu-form-group">
<label class="tu-form-label">Interests</label>
<div class="tu-checkbox-group">
<label class="tu-checkbox-label">
<input type="checkbox" value="newsletter" class="tu-checkbox">
<span class="tu-checkbox-text">Newsletter</span>
</label>
<label class="tu-checkbox-label">
<input type="checkbox" value="updates" class="tu-checkbox">
<span class="tu-checkbox-text">Product Updates</span>
</label>
<label class="tu-checkbox-label">
<input type="checkbox" value="offers" class="tu-checkbox">
<span class="tu-checkbox-text">Special Offers</span>
</label>
</div>
</div>
<!-- File Input -->
<div class="tu-form-group">
<label for="attachment" class="tu-form-label">Attachment</label>
<div class="tu-file-input">
<input type="file" id="attachment" class="tu-file-input-field">
<label for="attachment" class="tu-file-input-label">
<i class="tu-icon tu-icon-upload"></i>
<span>Choose file or drag and drop</span>
<span class="tu-file-input-text">PDF, DOC, DOCX up to 10MB</span>
</label>
</div>
</div>
<!-- Form Actions -->
<div class="tu-form-actions">
<button type="button" class="tu-btn tu-btn-ghost">
Cancel
</button>
<button type="submit" class="tu-btn tu-btn-primary">
Submit Form
</button>
</div>
</form>
<!-- Form States -->
<div class="mt-8">
<h3 class="tu-text tu-text-xl tu-font-semibold mb-4">Form States</h3>
<!-- Success State -->
<div class="tu-alert tu-alert-success mb-4">
<i class="tu-icon tu-icon-check-circle"></i>
<div>
<h4 class="tu-alert-title">Success!</h4>
<p class="tu-alert-description">Your form has been submitted successfully.</p>
</div>
</div>
<!-- Error State -->
<div class="tu-alert tu-alert-error mb-4">
<i class="tu-icon tu-icon-x-circle"></i>
<div>
<h4 class="tu-alert-title">Error</h4>
<p class="tu-alert-description">Please fix the errors in the form.</p>
</div>
</div>
<!-- Warning State -->
<div class="tu-alert tu-alert-warning">
<i class="tu-icon tu-icon-alert-triangle"></i>
<div>
<h4 class="tu-alert-title">Warning</h4>
<p class="tu-alert-description">Some fields may require your attention.</p>
</div>
</div>
</div>
</div>
<script>
// Character counter for textarea
const message = document.getElementById('message');
const charCount = document.getElementById('charCount');
if (message && charCount) {
message.addEventListener('input', () => {
const count = message.value.length;
charCount.textContent = count;
if (charCount.parentElement) {
if (count > 500) {
charCount.parentElement.classList.add('tu-form-text-error');
} else {
charCount.parentElement.classList.remove('tu-form-text-error');
}
}
});
}
// File input handling
const fileInput = document.getElementById('attachment');
const fileLabel = fileInput?.nextElementSibling;
if (fileInput && fileLabel) {
fileInput.addEventListener('change', (e) => {
const fileName = e.target.files[0]?.name || 'Choose file or drag and drop';
const labelText = fileLabel.querySelector('span');
if (labelText) {
labelText.textContent = fileName;
}
});
}
</script>
</body>
</html>CódigohtmlIntermediário
TailUI Navigation Components
Menus de navegação, breadcrumbs e paginação com TailUI
Dificuldade
6/10
Tempo estimado
25 min
Etiquetas
tailui, navigation, components
Pré-requisitos
TailUI basics, understanding of navigation patterns
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailUI Navigation Components</title>
<link href="https://cdn.jsdelivr.net/npm/tailui@latest/dist/tailui.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Top Navigation Bar -->
<nav class="tu-navbar tu-navbar-light tu-navbar-expand-lg">
<div class="tu-container">
<a class="tu-navbar-brand" href="#">
<img src="https://via.placeholder.com/32x32" alt="Logo" class="tu-navbar-brand-img">
MyApp
</a>
<button class="tu-navbar-toggler" type="button">
<span class="tu-navbar-toggler-icon"></span>
</button>
<div class="tu-navbar-collapse">
<ul class="tu-navbar-nav">
<li class="tu-nav-item">
<a class="tu-nav-link tu-nav-link-active" href="#">Home</a>
</li>
<li class="tu-nav-item tu-dropdown">
<a class="tu-nav-link tu-dropdown-toggle" href="#" role="button">
Products
<span class="tu-dropdown-arrow"></span>
</a>
<ul class="tu-dropdown-menu">
<li><a class="tu-dropdown-item" href="#">Web Design</a></li>
<li><a class="tu-dropdown-item" href="#">Development</a></li>
<li><a class="tu-dropdown-item" href="#">Consulting</a></li>
<li><hr class="tu-dropdown-divider"></li>
<li><a class="tu-dropdown-item" href="#">All Services</a></li>
</ul>
</li>
<li class="tu-nav-item">
<a class="tu-nav-link" href="#">About</a>
</li>
<li class="tu-nav-item">
<a class="tu-nav-link" href="#">Contact</a>
</li>
</ul>
<form class="tu-navbar-search ml-auto">
<input class="tu-navbar-search-input" type="search" placeholder="Search...">
<button class="tu-navbar-search-btn" type="submit">
<i class="tu-icon tu-icon-search"></i>
</button>
</form>
<div class="tu-navbar-nav ml-2">
<button class="tu-btn tu-btn-outline-primary tu-btn-sm">Sign In</button>
<button class="tu-btn tu-btn-primary tu-btn-sm ml-2">Get Started</button>
</div>
</div>
</div>
</nav>
<!-- Sidebar Navigation -->
<div class="tu-container-fluid mt-4">
<div class="tu-row">
<!-- Sidebar -->
<div class="tu-col-md-3">
<div class="tu-sidebar">
<div class="tu-sidebar-header">
<h5 class="tu-sidebar-title">Dashboard</h5>
</div>
<ul class="tu-sidebar-nav">
<li class="tu-sidebar-item">
<a class="tu-sidebar-link tu-sidebar-link-active" href="#">
<i class="tu-icon tu-icon-home tu-sidebar-icon"></i>
Overview
</a>
</li>
<li class="tu-sidebar-item">
<a class="tu-sidebar-link" href="#">
<i class="tu-icon tu-icon-users tu-sidebar-icon"></i>
Users
<span class="tu-sidebar-badge tu-badge-primary">5</span>
</a>
</li>
<li class="tu-sidebar-item">
<a class="tu-sidebar-link" href="#">
<i class="tu-icon tu-icon-shopping-cart tu-sidebar-icon"></i>
Orders
</a>
</li>
<li class="tu-sidebar-item tu-dropdown">
<a class="tu-sidebar-link tu-dropdown-toggle" href="#">
<i class="tu-icon tu-icon-settings tu-sidebar-icon"></i>
Settings
<span class="tu-sidebar-arrow"></span>
</a>
<ul class="tu-sidebar-dropdown">
<li><a class="tu-sidebar-dropdown-item" href="#">Profile</a></li>
<li><a class="tu-sidebar-dropdown-item" href="#">Security</a></li>
<li><a class="tu-sidebar-dropdown-item" href="#">Notifications</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Main Content -->
<div class="tu-col-md-9">
<div class="tu-container">
<!-- Breadcrumbs -->
<nav aria-label="breadcrumb">
<ol class="tu-breadcrumb">
<li class="tu-breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="tu-breadcrumb-item">
<a href="#">Components</a>
</li>
<li class="tu-breadcrumb-item tu-breadcrumb-item-active">
Navigation
</li>
</ol>
</nav>
<!-- Tabs -->
<div class="tu-tabs mt-4">
<ul class="tu-nav tu-nav-tabs">
<li class="tu-nav-item">
<a class="tu-nav-link tu-nav-link-active" href="#tab1" data-toggle="tu-tab">Dashboard</a>
</li>
<li class="tu-nav-item">
<a class="tu-nav-link" href="#tab2" data-toggle="tu-tab">Analytics</a>
</li>
<li class="tu-nav-item">
<a class="tu-nav-link" href="#tab3" data-toggle="tu-tab">Reports</a>
</li>
<li class="tu-nav-item">
<a class="tu-nav-link" href="#tab4" data-toggle="tu-tab">Settings</a>
</li>
</ul>
<div class="tu-tab-content mt-3">
<div class="tu-tab-pane tu-tab-pane-active" id="tab1">
<h5>Dashboard Content</h5>
<p>Welcome to your dashboard. Here's an overview of your recent activity.</p>
<!-- Stats Cards -->
<div class="tu-grid tu-grid-cols-4 gap-4 mt-4">
<div class="tu-card tu-card-body">
<h6 class="tu-card-title">Total Users</h6>
<p class="tu-card-text tu-text-3xl tu-text-primary">1,234</p>
<small class="tu-text-success">+12% from last month</small>
</div>
<div class="tu-card tu-card-body">
<h6 class="tu-card-title">Revenue</h6>
<p class="tu-card-text tu-text-3xl tu-text-success">$45,678</p>
<small class="tu-text-success">+23% from last month</small>
</div>
<div class="tu-card tu-card-body">
<h6 class="tu-card-title">Orders</h6>
<p class="tu-card-text tu-text-3xl tu-text-info">567</p>
<small class="tu-text-warning">-5% from last month</small>
</div>
<div class="tu-card tu-card-body">
<h6 class="tu-card-title">Growth Rate</h6>
<p class="tu-card-text tu-text-3xl tu-text-warning">15.3%</p>
<small class="tu-text-muted">Stable</small>
</div>
</div>
</div>
<div class="tu-tab-pane" id="tab2">
<h5>Analytics Content</h5>
<p>Detailed analytics and insights about your application usage.</p>
</div>
<div class="tu-tab-pane" id="tab3">
<h5>Reports Content</h5>
<p>Generate and view various reports about your business metrics.</p>
</div>
<div class="tu-tab-pane" id="tab4">
<h5>Settings Content</h5>
<p>Configure your application settings and preferences.</p>
</div>
</div>
</div>
<!-- Pagination -->
<div class="mt-5">
<h5>Pagination Example</h5>
<nav>
<ul class="tu-pagination">
<li class="tu-pagination-item tu-pagination-disabled">
<a class="tu-pagination-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="tu-pagination-item tu-pagination-active">
<a class="tu-pagination-link" href="#">1</a>
</li>
<li class="tu-pagination-item">
<a class="tu-pagination-link" href="#">2</a>
</li>
<li class="tu-pagination-item">
<a class="tu-pagination-link" href="#">3</a>
</li>
<li class="tu-pagination-item tu-dropdown">
<a class="tu-pagination-link tu-dropdown-toggle" href="#">
...
<span class="tu-dropdown-arrow"></span>
</a>
<ul class="tu-dropdown-menu">
<li><a class="tu-dropdown-item" href="#">4</a></li>
<li><a class="tu-dropdown-item" href="#">5</a></li>
<li><a class="tu-dropdown-item" href="#">6</a></li>
<li><a class="tu-dropdown-item" href="#">7</a></li>
<li><a class="tu-dropdown-item" href="#">8</a></li>
</ul>
</li>
<li class="tu-pagination-item">
<a class="tu-pagination-link" href="#">9</a>
</li>
<li class="tu-pagination-item">
<a class="tu-pagination-link" href="#">10</a>
</li>
<li class="tu-pagination-item">
<a class="tu-pagination-link" href="#">Next</a>
</li>
</ul>
</nav>
<!-- Compact Pagination -->
<nav class="mt-3">
<ul class="tu-pagination tu-pagination-sm">
<li class="tu-pagination-item tu-pagination-disabled">
<a class="tu-pagination-link" href="#">‹</a>
</li>
<li class="tu-pagination-item tu-pagination-active">
<a class="tu-pagination-link" href="#">1</a>
</li>
<li class="tu-pagination-item">
<a class="tu-pagination-link" href="#">2</a>
</li>
<li class="tu-pagination-item">
<a class="tu-pagination-link" href="#">3</a>
</li>
<li class="tu-pagination-item">
<a class="tu-pagination-link" href="#">›</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Navigation (Mobile) -->
<nav class="tu-bottom-nav tu-bottom-nav-fixed tu-d-md-none">
<a class="tu-bottom-nav-item tu-bottom-nav-item-active" href="#">
<i class="tu-icon tu-icon-home tu-bottom-nav-icon"></i>
<span class="tu-bottom-nav-text">Home</span>
</a>
<a class="tu-bottom-nav-item" href="#">
<i class="tu-icon tu-icon-search tu-bottom-nav-icon"></i>
<span class="tu-bottom-nav-text">Search</span>
</a>
<a class="tu-bottom-nav-item" href="#">
<i class="tu-icon tu-icon-plus-circle tu-bottom-nav-icon"></i>
<span class="tu-bottom-nav-text">Create</span>
</a>
<a class="tu-bottom-nav-item" href="#">
<i class="tu-icon tu-icon-heart tu-bottom-nav-icon"></i>
<span class="tu-bottom-nav-text">Favorites</span>
</a>
<a class="tu-bottom-nav-item" href="#">
<i class="tu-icon tu-icon-user tu-bottom-nav-icon"></i>
<span class="tu-bottom-nav-text">Profile</span>
</a>
</nav>
<script src="https://cdn.jsdelivr.net/npm/tailui@latest/dist/tailui.min.js"></script>
</body>
</html>CódigohtmlIntermediário
Modais e Diálogos do TailUI
Janelas modais, diálogos, tooltips e popovers com TailUI
Dificuldade
7/10
Tempo estimado
30 min
Etiquetas
tailui, modal, dialog, components
Pré-requisitos
TailUI basics, understanding of modal patterns
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailUI Modals and Dialogs</title>
<link href="https://cdn.jsdelivr.net/npm/tailui@latest/dist/tailui.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<h2 class="tu-text tu-text-3xl tu-font-bold mb-6">Modals and Dialogs</h2>
<!-- Modal Trigger Buttons -->
<div class="tu-flex tu-flex-wrap tu-gap-3 mb-8">
<button type="button" class="tu-btn tu-btn-primary" data-toggle="tu-modal" data-target="#basicModal">
Basic Modal
</button>
<button type="button" class="tu-btn tu-btn-success" data-toggle="tu-modal" data-target="#formModal">
Modal with Form
</button>
<button type="button" class="tu-btn tu-btn-warning" data-toggle="tu-modal" data-target="#confirmModal">
Confirmation Dialog
</button>
<button type="button" class="tu-btn tu-btn-info" data-toggle="tu-modal" data-target="#largeModal">
Large Modal
</button>
<button type="button" class="tu-btn tu-btn-danger" data-toggle="tu-modal" data-target="#deleteModal">
Delete Confirmation
</button>
</div>
<!-- Tooltips -->
<div class="tu-section mb-8">
<h3 class="tu-text tu-text-xl tu-font-semibold mb-4">Tooltips</h3>
<div class="tu-flex tu-flex-wrap tu-gap-3">
<button type="button" class="tu-btn tu-btn-secondary" data-toggle="tu-tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="tu-btn tu-btn-secondary" data-toggle="tu-tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="tu-btn tu-btn-secondary" data-toggle="tu-tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="tu-btn tu-btn-secondary" data-toggle="tu-tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<button type="button" class="tu-btn tu-btn-outline-info" data-toggle="tu-tooltip" data-html="true" data-trigger="click" title="<strong>HTML Tooltip</strong><br>With <em>formatting</em>">
HTML Tooltip
</button>
</div>
</div>
<!-- Popovers -->
<div class="tu-section mb-8">
<h3 class="tu-text tu-text-xl tu-font-semibold mb-4">Popovers</h3>
<div class="tu-flex tu-flex-wrap tu-gap-3">
<button type="button" class="tu-btn tu-btn-primary" data-toggle="tu-popover" data-placement="top" data-title="Popover Title" data-content="This is the popover content. Click outside to dismiss.">
Popover on top
</button>
<button type="button" class="tu-btn tu-btn-success" data-toggle="tu-popover" data-placement="right" data-title="Success!" data-content="Your changes have been saved successfully.">
Popover on right
</button>
<button type="button" class="tu-btn tu-btn-warning" data-toggle="tu-popover" data-trigger="focus" data-title="Focus Trigger" data-content="This popover appears when you focus the button.">
Focus Popover
</button>
<button type="button" class="tu-btn tu-btn-info" data-toggle="tu-popover" data-trigger="hover" data-title="Hover Trigger" data-content="This popover appears when you hover over the button.">
Hover Popover
</button>
</div>
</div>
<!-- Alerts and Notifications -->
<div class="tu-section">
<h3 class="tu-text tu-text-xl tu-font-semibold mb-4">Alerts and Notifications</h3>
<!-- Static Alerts -->
<div class="tu-alert tu-alert-success tu-alert-dismissible mb-3" role="alert">
<i class="tu-icon tu-icon-check-circle"></i>
<strong>Success!</strong> Your profile has been updated successfully.
<button type="button" class="tu-alert-close" data-dismiss="tu-alert">
<span>×</span>
</button>
</div>
<div class="tu-alert tu-alert-info tu-alert-dismissible mb-3" role="alert">
<i class="tu-icon tu-icon-info"></i>
<strong>Info:</strong> A new version is available.
<a href="#" class="tu-alert-link">Update now</a>.
<button type="button" class="tu-alert-close" data-dismiss="tu-alert">
<span>×</span>
</button>
</div>
<div class="tu-alert tu-alert-warning tu-alert-dismissible mb-3" role="alert">
<i class="tu-icon tu-icon-alert-triangle"></i>
<strong>Warning:</strong> Your session will expire in 5 minutes.
<button type="button" class="tu-alert-close" data-dismiss="tu-alert">
<span>×</span>
</button>
</div>
<div class="tu-alert tu-alert-danger tu-alert-dismissible mb-3" role="alert">
<i class="tu-icon tu-icon-x-circle"></i>
<strong>Error:</strong> Unable to save changes. Please try again.
<button type="button" class="tu-alert-close" data-dismiss="tu-alert">
<span>×</span>
</button>
</div>
<!-- Toast Notifications -->
<div class="tu-toast-container tu-toast-container-top-right">
<div class="tu-toast tu-toast-success tu-toast-show">
<div class="tu-toast-header">
<i class="tu-icon tu-icon-check-circle mr-2"></i>
<strong class="mr-auto">Success</strong>
<small>2 mins ago</small>
<button type="button" class="tu-ml-2 mb-1 close" data-dismiss="tu-toast">×</button>
</div>
<div class="tu-toast-body">
Your file has been uploaded successfully.
</div>
</div>
<div class="tu-toast tu-toast-info tu-toast-show">
<div class="tu-toast-header">
<i class="tu-icon tu-icon-info mr-2"></i>
<strong class="mr-auto">Information</strong>
<small>5 mins ago</small>
<button type="button" class="tu-ml-2 mb-1 close" data-dismiss="tu-toast">×</button>
</div>
<div class="tu-toast-body">
System maintenance is scheduled for tonight.
</div>
</div>
</div>
</div>
</div>
<!-- Basic Modal -->
<div class="tu-modal" id="basicModal" tabindex="-1">
<div class="tu-modal-dialog">
<div class="tu-modal-content">
<div class="tu-modal-header">
<h5 class="tu-modal-title">Basic Modal</h5>
<button type="button" class="tu-modal-close" data-dismiss="tu-modal">
<span>×</span>
</button>
</div>
<div class="tu-modal-body">
<p>This is a basic modal example. You can add any content here.</p>
<p>Modals are perfect for displaying important information or gathering user input.</p>
</div>
<div class="tu-modal-footer">
<button type="button" class="tu-btn tu-btn-secondary" data-dismiss="tu-modal">Close</button>
<button type="button" class="tu-btn tu-btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal with Form -->
<div class="tu-modal" id="formModal" tabindex="-1">
<div class="tu-modal-dialog">
<div class="tu-modal-content">
<div class="tu-modal-header">
<h5 class="tu-modal-title">Add New User</h5>
<button type="button" class="tu-modal-close" data-dismiss="tu-modal">
<span>×</span>
</button>
</div>
<div class="tu-modal-body">
<form class="tu-form">
<div class="tu-form-group">
<label for="userName" class="tu-form-label">Name</label>
<input type="text" class="tu-form-input" id="userName" placeholder="Enter name">
</div>
<div class="tu-form-group">
<label for="userEmail" class="tu-form-label">Email</label>
<input type="email" class="tu-form-input" id="userEmail" placeholder="Enter email">
</div>
<div class="tu-form-group">
<label for="userRole" class="tu-form-label">Role</label>
<select class="tu-form-select" id="userRole">
<option>Administrator</option>
<option>Editor</option>
<option>Viewer</option>
</select>
</div>
</form>
</div>
<div class="tu-modal-footer">
<button type="button" class="tu-btn tu-btn-secondary" data-dismiss="tu-modal">Cancel</button>
<button type="button" class="tu-btn tu-btn-primary">Add User</button>
</div>
</div>
</div>
</div>
<!-- Confirmation Dialog -->
<div class="tu-modal" id="confirmModal" tabindex="-1">
<div class="tu-modal-dialog tu-modal-sm">
<div class="tu-modal-content">
<div class="tu-modal-header">
<h5 class="tu-modal-title">Confirm Action</h5>
<button type="button" class="tu-modal-close" data-dismiss="tu-modal">
<span>×</span>
</button>
</div>
<div class="tu-modal-body">
<p>Are you sure you want to proceed with this action?</p>
<p class="tu-text-muted tu-text-sm">This action cannot be undone.</p>
</div>
<div class="tu-modal-footer">
<button type="button" class="tu-btn tu-btn-secondary" data-dismiss="tu-modal">Cancel</button>
<button type="button" class="tu-btn tu-btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
<!-- Large Modal -->
<div class="tu-modal" id="largeModal" tabindex="-1">
<div class="tu-modal-dialog tu-modal-lg">
<div class="tu-modal-content">
<div class="tu-modal-header">
<h5 class="tu-modal-title">Large Modal</h5>
<button type="button" class="tu-modal-close" data-dismiss="tu-modal">
<span>×</span>
</button>
</div>
<div class="tu-modal-body">
<h6>Terms and Conditions</h6>
<p>This is a large modal that can contain substantial content like terms and conditions, privacy policies, or detailed information.</p>
<h6 class="mt-4">Section 1: Usage Rights</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<h6 class="mt-4">Section 2: Privacy</h6>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h6 class="mt-4">Section 3: Limitations</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="tu-modal-footer">
<button type="button" class="tu-btn tu-btn-secondary" data-dismiss="tu-modal">Decline</button>
<button type="button" class="tu-btn tu-btn-primary">Accept Terms</button>
</div>
</div>
</div>
</div>
<!-- Delete Confirmation Modal -->
<div class="tu-modal" id="deleteModal" tabindex="-1">
<div class="tu-modal-dialog">
<div class="tu-modal-content">
<div class="tu-modal-header tu-bg-danger tu-text-white">
<h5 class="tu-modal-title">
<i class="tu-icon tu-icon-trash-2 mr-2"></i>
Delete Confirmation
</h5>
<button type="button" class="tu-modal-close tu-text-white" data-dismiss="tu-modal">
<span>×</span>
</button>
</div>
<div class="tu-modal-body">
<div class="tu-alert tu-alert-danger tu-border-0 mb-3">
<i class="tu-icon tu-icon-alert-triangle"></i>
<strong>Warning!</strong> This action cannot be undone.
</div>
<p>Are you sure you want to delete this item permanently?</p>
<p class="tu-text-sm tu-text-muted">All associated data will be lost.</p>
<div class="tu-form-check mt-3">
<input class="tu-form-check-input" type="checkbox" id="confirmDelete">
<label class="tu-form-check-label" for="confirmDelete">
I understand this action cannot be undone
</label>
</div>
</div>
<div class="tu-modal-footer">
<button type="button" class="tu-btn tu-btn-secondary" data-dismiss="tu-modal">Cancel</button>
<button type="button" class="tu-btn tu-btn-danger" id="deleteBtn" disabled>Delete Permanently</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/tailui@latest/dist/tailui.min.js"></script>
<script>
// Enable delete button only when checkbox is checked
const confirmDeleteCheckbox = document.getElementById('confirmDelete');
const deleteButton = document.getElementById('deleteBtn');
const toastContainer = document.querySelector('.tu-toast-container');
if (confirmDeleteCheckbox && deleteButton) {
confirmDeleteCheckbox.addEventListener('change', function() {
deleteButton.disabled = !this.checked;
});
}
// Show toast notification on modal close
document.querySelectorAll('[data-dismiss="tu-modal"]').forEach(button => {
button.addEventListener('click', function() {
const modal = this.closest('.tu-modal');
const modalTitle = modal?.querySelector('.tu-modal-title')?.textContent ?? 'Unknown';
// Create a new toast
const toastHtml = `
<div class="tu-toast tu-toast-info" role="alert">
<div class="tu-toast-header">
<i class="tu-icon tu-icon-info mr-2"></i>
<strong class="mr-auto">Modal Closed</strong>
<small>Just now</small>
<button type="button" class="tu-ml-2 mb-1 close" data-dismiss="tu-toast">×</button>
</div>
<div class="tu-toast-body">
Modal "${modalTitle}" has been closed.
</div>
</div>
`;
// Add toast to container
if (toastContainer) {
toastContainer.insertAdjacentHTML('beforeend', toastHtml);
}
});
});
</script>
</body>
</html>Ferramentas
Ferramentas frequentemente usadas com este exemplo
Relacionado