tailpipecss
Version:
TailpipeCSS is a starter UI component for a fast starting point
1,012 lines (918 loc) • 44.1 kB
HTML
<html lang="en">
<link rel="stylesheet" href="dist/tailpipecss.css">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailpipeCSS</title>
</head>
<body>
<main x-data="{isDrawerLeft: false, isDrawerRight: false, isDrawerTop: false, isDrawerBottom: false}">
<!-- Nav -->
<nav class="nav">
<div class="nav-desktop">
<div class="nav-desktop-container">
<div class="nav-mobile-menu">
<!-- Mobile menu button-->
<button type="button" aria-controls="mobile-menu" aria-expanded="false"
x-on:click.prevent.stop="isDrawerLeft = true">
<span class="sr-only">Open main menu</span>
<!-- menu is closed. -->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- menu is open. -->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="nav-menu">
<div class="nav-logo">
<img src="./src/tailpipecss-dark.svg" alt="tailpipecss">
</div>
<div class="nav-menu-wrapper">
<div class="nav-menu-list">
<a href="#" class="nav-menu-item active" aria-current="page">Dashboard</a>
<a href="#" class="nav-menu-item">Team</a>
<a href="#" class="nav-menu-item">Projects</a>
<a href="#" class="nav-menu-item">Calendar</a>
</div>
</div>
</div>
<div class="nav-add-on">
<button class="notification">
<span class="sr-only">View notifications</span>
<!-- Heroicon name: outline/bell -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="relative">
<div>
<button class="nav-profile" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img src="https://picsum.photos/200/300" alt="" class="avatar avatar-rounded mini">
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Drawer Left -->
<div class="drawer-left">
<!-- drawer -->
<div class="drawer-left-container" tabindex="-1"
x-bind:class="{'drawer-left-show visible':isDrawerLeft, 'drawer-left-close invisible':!isDrawerLeft}"
x-on:click.away="isDrawerLeft=false">
<div class="drawer-left-header">
<h5 class="title">Menu Left</h5>
<button type="button" class="btn-icon hide" aria-label="Close" x-on:click="isDrawerLeft = false">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="drawer-left-body">
<ul class="menu">
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
<span class="menu-name">Dashboard</span>
</a>
</li>
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
<span class="menu-name">Users</span>
</a>
</li>
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
<span class="menu-name">Products</span>
</a>
</li>
</ul>
</div>
</div>
<div class="drawer-mask"
x-bind:class="{'drawer-mask-close invisible':!isDrawerLeft, 'drawer-mask-open visible':isDrawerLeft}"
x-on:click="isDrawerLeft = false"></div>
</div>
<!-- Drawer Right -->
<div class="drawer-right">
<!-- drawer -->
<div class="drawer-right-container" tabindex="-1"
x-bind:class="{'drawer-right-show visible':isDrawerRight, 'drawer-right-close invisible':!isDrawerRight}"
x-on:click.away="isDrawerRight=false">
<div class="drawer-right-header">
<h5 class="title">Menu Right</h5>
<button type="button" class="btn-icon hide" aria-label="Close" x-on:click="isDrawerRight = false">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="drawer-right-body">
<ul class="menu">
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
<span class="menu-name">Dashboard</span>
</a>
</li>
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
<span class="menu-name">Users</span>
</a>
</li>
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
<span class="menu-name">Products</span>
</a>
</li>
</ul>
</div>
</div>
<div class="drawer-mask"
x-bind:class="{'drawer-mask-close invisible':!isDrawerRight, 'drawer-mask-open visible':isDrawerRight}"
x-on:click="isDrawerRight= false"></div>
</div>
<!-- Drawer Top -->
<div class="drawer-top">
<!-- drawer -->
<div class="drawer-top-container" tabindex="-1"
x-bind:class="{'drawer-top-show visible':isDrawerTop, 'drawer-top-close invisible':!isDrawerTop}"
x-on:click.away="isDrawerTop=false">
<div class="drawer-top-wrapper">
<div class="drawer-top-header">
<h5 class="title">Menu Top</h5>
<button type="button" class="btn-icon hide" aria-label="Close" x-on:click="isDrawerTop = false">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="drawer-top-body">
<ul class="menu">
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
<span class="menu-name">Dashboard</span>
</a>
</li>
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
<span class="menu-name">Users</span>
</a>
</li>
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
<span class="menu-name">Products</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="drawer-mask"
x-bind:class="{'drawer-mask-close invisible':!isDrawerTop, 'drawer-mask-open visible':isDrawerTop}"
x-on:click="isDrawerTop= false"></div>
</div>
<!-- Drawer Bottom -->
<div class="drawer-bottom">
<!-- drawer -->
<div class="drawer-bottom-container" tabindex="-1"
x-bind:class="{'drawer-bottom-show visible':isDrawerBottom, 'drawer-bottom-close invisible':!isDrawerBottom}"
x-on:click.away="isDrawerBottom=false">
<div class="drawer-bottom-wrapper">
<div class="drawer-bottom-header">
<h5 class="title">Menu Bottom</h5>
<button type="button" class="btn-icon hide" aria-label="Close" x-on:click="isDrawerBottom = false">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="drawer-bottom-body">
<ul class="menu">
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
<span class="menu-name">Dashboard</span>
</a>
</li>
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
<span class="menu-name">Users</span>
</a>
</li>
<li class="menu-item">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
<span class="menu-name">Products</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="drawer-mask"
x-bind:class="{'drawer-mask-close invisible':!isDrawerBottom, 'drawer-mask-open visible':isDrawerBottom}"
x-on:click="isDrawerBottom= false"></div>
</div>
<div class="px-8 py-4 max-w-5-xl mx-auto">
<!-- Drawer -->
<h2 class="font-semibold text-xl mt-16">Drawer</h2>
<div class="mt-4">
<button type="button" aria-controls="mobile-menu" aria-expanded="false"
x-on:click.prevent.stop="isDrawerLeft= true">Drawer Left</button>
<button type="button" aria-controls="mobile-menu" aria-expanded="false"
x-on:click.prevent.stop="isDrawerRight = true">Drawer Right</button>
<button type="button" aria-controls="mobile-menu" aria-expanded="false"
x-on:click.prevent.stop="isDrawerTop = true">Drawer Top</button>
<button type="button" aria-controls="mobile-menu" aria-expanded="false"
x-on:click.prevent.stop="isDrawerBottom = true">Drawer Bottom</button>
</div>
<!-- Empty Data -->
<div class="tailpipe-empty-data">
<h2 class="font-semibold text-xl mt-16">Empty Data</h2>
<div class="mt-4">
<div class="mt-2">
<div class="empty-data">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="empty-placeholder">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H6.911a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661z" />
</svg>
<p class="empty-message">No Data</p>
</div>
</div>
</div>
</div>
<!-- Avatar -->
<div class="tailpipe-avatar">
<h2 class="font-semibold text-xl mt-16">Avatar</h2>
<div class="mt-4">
<p class="mb-4">Default</p>
<div class="flex flex-row gap-4">
<img src="https://picsum.photos/200/300" alt="" class="avatar avatar-rounded">
<img src="https://picsum.photos/200/300" alt="" class="avatar avatar-square">
</div>
</div>
<div class="mt-4">
<p class="mb-4">Mini</p>
<div class="flex flex-row gap-4">
<img src="https://picsum.photos/200/300" alt="" class="avatar avatar-rounded mini">
<img src="https://picsum.photos/200/300" alt="" class="avatar avatar-square mini">
</div>
</div>
<div class="mt-4">
<p class="mb-4">Large</p>
<div class="flex flex-row gap-4">
<img src="https://picsum.photos/200/300" alt="" class="avatar avatar-rounded large">
<img src="https://picsum.photos/200/300" alt="" class="avatar avatar-square large">
</div>
</div>
</div>
<!-- Card -->
<div class="tailpipe-card">
<h2 class="font-semibold text-xl mt-16">Card</h2>
<div class="mt-4">
<div class="mt-2">
<div class="flex flex-col gap-8 justify-center">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5>Full Card title</h5>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<button type="button" class="mt-2 btn-primary btn-xs">Action Button</button>
</div>
<div class="card-footer">
2 days ago
</div>
</div>
<div class="card">
<div class="card-body">
<h5>Simplified Card title</h5>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<button type="button" class="mt-2 btn-danger btn-xs">Action Button</button>
</div>
</div>
<div class="card">
<div class="flex flex-row">
<div class="flex items-center justify-center px-4">
<img src="https://picsum.photos/200/300" alt="" class="avatar avatar-rounded large">
</div>
<div class="card-body">
<h3>Mark Up</h3>
<p><small>The quick brown fox.</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline -->
<div class="tailpipe-timeline">
<h2 class="font-semibold text-xl mt-16">Timeline</h2>
<div class="mt-4">
<div class="mt-2">
<ol class="timeline">
<li class="recent">
<div class="flex flex-start items-center">
<div class="timeline-marker"></div>
<p class="timeline-date">8 February, 2022</p>
</div>
<div class="timeline-details">
<h4 class="timeline-title">Delivered</h4>
<p class="timeline-message">
The quick brown fox jumps over the lazy dog.
</p>
</div>
</li>
<li>
<div class="flex flex-start items-center">
<div class="timeline-marker"></div>
<p class="timeline-date">1 January, 2022</p>
</div>
<div class="timeline-details">
<h4 class="timeline-title">Out for Delivery</h4>
<p class="timeline-message">
The quick brown fox jumps over the lazy dog again.
</p>
</div>
</li>
</ol>
</div>
</div>
</div>
<!-- Form -->
<div class="tailpipe-form">
<h2 class="font-semibold text-xl mt-16">Form</h2>
<div class="mt-4">
<div class="mt-2">
<div class="form">
<h3 class="form-heading">Account login</h3>
<div class="form-group input-group">
<label for="" class="input-label">Email</label>
<input type="email" name="" placeholder="youremail@domain.com" id="">
</div>
<div class="form-group input-group">
<label for="" class="input-label">Password</label>
<input type="password" name="" placeholder="Password" id="">
</div>
<button type="submit" class="btn-primary w-full">Login</button>
</div>
</div>
</div>
</div>
<!-- Typography -->
<div class="tailpipe-typography">
<h2 class="font-semibold text-xl mt-16">Typography</h2>
<div class="mt-4">
<div class="mt-2">
<p>The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<h1>h1.Tailpipe</h1>
<h2>h1.Tailpipe</h2>
<h3>h1.Tailpipe</h3>
<h4>h1.Tailpipe</h4>
<h5>h1.Tailpipe</h5>
</div>
</div>
</div>
<!-- Link -->
<div class="tailpipe-link">
<h2 class="font-semibold text-xl mt-16">Link</h2>
<div class="mt-4">
<div class="mt-2">
<p>The quick brown fox <a href="#">jumps</a> over the lazy dog.</p>
<a href="#">Sun</a>
<a href="#" class="link-primary text-error">Moon</a>
</div>
</div>
</div>
<!-- Text color -->
<div class="tailpipe-text-color">
<h2 class="font-semibold text-xl mt-16">Text Colors</h2>
<div class="mt-4">
<div class="mt-2">
<p class="text-primary">Primary</p>
<p class="text-neutral">Neutral</p>
<p class="text-success">Success</p>
<p class="text-error">Error</p>
<p class="text-warning">Primary</p>
<p class="text-info">Info</p>
</div>
</div>
</div>
<!-- Badge -->
<div class="tailpipe-badge">
<h2 class="font-semibold text-xl mt-16">Badge</h2>
<div class="mt-4">
<div class="mt-2">
<div class="flex flex-wrap space-x-2 justify-center">
<div>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-neutral">Neutral</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-white">White</span>
</div>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="tailpipe-divider">
<h2 class="font-semibold text-xl mt-16">Divider</h2>
<div class="mt-4">
<div class="mt-2">
<p>The quick brown fox jumps over</p>
<div class="divider divider-horizontal" role="separator"></div>
<p>the lazy dog.</p>
</div>
<div class="mt-2">
<div class="divider divider-horizontal divider-text" role="separator">
<span class="divider-inner-text">Text</span>
</div>
</div>
</div>
</div>
<!-- Select -->
<div class="tailpipe-selects">
<h2 class="font-semibold text-xl mt-16">Select</h2>
<div class="mt-4">
<div class="mt-2">
<p>Plain</p>
<div class="select-group">
<label for="countries" class="select-label">Select an
option</label>
<select id="countries">
<option selected>Choose Pizza Topping</option>
<option value="Meat">All Meat</option>
<option value="Cheese">Cheese</option>
</select>
</div>
</div>
<div class="mt-4">
<p>Styled</p>
<div class="select-group">
<label for="countries" class="select-label">Select an
option</label>
<select id="countries" class="select-option">
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>
</div>
</div>
</div>
<!-- Inputs -->
<div class="tailpipe-inputs">
<h2 class="font-semibold text-xl mt-16">Input</h2>
<div class="mt-4">
<!-- status: default, error, warning -->
<p class="font-semibold">Status</p>
<div class="mt-2 flex flex-row gap-2">
<div class="input-group">
<label for="" class="input-label">Input Plain</label>
<input type="text" placeholder="Input Plain" />
</div>
<div class="input-group">
<label for="" class="input-label">Default</label>
<input type="text" placeholder="Default" class="input" />
</div>
<div class="input-group">
<label for="" class="input-label">Error</label>
<input type="text" placeholder="Error" class="input validation-error" />
</div>
<div class="input-group">
<label for="" class="input-label">Warning</label>
<input type="text" placeholder="Warning" class="input validation-warning" />
</div>
</div>
<!-- size: xs, default, large, xl -->
<div class="mt-4">
<p class="font-semibold">Sizes</p>
<div class="mt-2 flex flex-row gap-2">
<div class="input-group">
<label for="" class="input-label">Extra Small</label>
<input type="text" placeholder="Extra small" class="input input-text-xs" />
</div>
<div class="input-group">
<label for="" class="input-label">Default</label>
<input type="text" placeholder="Default" class="input input-text" />
</div>
<div class="input-group">
<label for="" class="input-label">Large</label>
<input type="text" placeholder="Large" class="input input-text-lg" />
</div>
<div class="input-group">
<label for="" class="input-label">Extra Large</label>
<input type="text" placeholder="Extra large" class="input input-text-xl" />
</div>
</div>
</div>
<!-- Groups -->
<div class="mt-4">
<p class="font-semibold">Groups</p>
<p class="mt-4 text-sm font-semibold text-gray-500">With Label</p>
<div class="mt-2">
<div class="form-group input-group">
<label class="input-label">Username</label>
<input type="text" placeholder="Username" class="input" />
</div>
<div class="form-group input-group">
<label class="input-label">Password</label>
<input type="password" placeholder="Password" class="input" />
</div>
</div>
<p class="mt-4 text-sm font-semibold text-gray-500">Validation error</p>
<div class="mt-2">
<div class="input-group">
<label class="input-label">Username</label>
<input type="text" placeholder="Enter your username" class="input validation-error" />
<p class="validation-text-error">Username not found.</p>
</div>
</div>
<p class="mt-4 text-sm font-semibold text-gray-500">Floating Label</p>
<div class="input-float-group mt-2">
<input type="text" placeholder=" " class="input input-float" />
<label class="input-float-label">Fullname</label>
</div>
</div>
<p class="mt-4 text-sm font-semibold text-gray-500">Leading</p>
<div class="mt-2">
<div class="input-group-leading">
<span class="input-leading-text">$</span>
<input type="text" name="" id="" class="input" />
</div>
</div>
<p class="mt-4 text-sm font-semibold text-gray-500">Trailing</p>
<div class="mt-2">
<div class="input-group-trailing">
<input type="text" name="" id="" class="input" />
<span class="input-trailing-text">$</span>
</div>
</div>
</div>
<!-- Radio -->
<div class="tailpipe-radio">
<h2 class="font-semibold text-xl mt-16">Radio</h2>
<div class="mt-4">
<div class="mt-2">
<div>
<input type="radio" name="fuel" id="gas">
<label class="input-label" for="">
Gas
</label>
</div>
<div>
<input type="radio" name="fuel" id="diesel" checked>
<label class="input-label" for="">
Diesel
</label>
</div>
</div>
</div>
</div>
<!-- Checkbox -->
<div class="tailpipe-checkbox">
<h2 class="font-semibold text-xl mt-16">Checkbox</h2>
<div class="mt-4">
<div class="mt-2">
<div class="form-check form-checkbox">
<input type="checkbox" name="" id="">
<label class="input-label" for="">
Pizza
</label>
</div>
<div class="form-check form-checkbox">
<input type="checkbox" value="" id="">
<label class="input-label" for="">
Burger
</label>
</div>
</div>
</div>
</div>
<!-- Switch -->
<div class="tailpipe-switch">
<h2 class="font-semibold text-xl mt-16">Switch</h2>
<div class="mt-4">
<div class="mt-2">
<div class="form-check form-switch">
<input class="input-switch" type="checkbox" role="switch" id="">
<label class="input-label" for="flexSwitchCheckDefault">Switch toggle</label>
</div>
</div>
</div>
</div>
</div>
<!-- Select card -->
<div class="tailpipe-select-card">
<h2 class="font-semibold text-xl mt-16">Select card</h2>
<div class="mt-4">
<div class="flex justify-center gap-4 w-screen">
<div class="form-select-card">
<input class="hidden" id="radio_1" type="radio" name="radio" checked>
<label class="select-card" for="radio_1">
<span class="text-xs font-semibold uppercase">Burger Junior</span>
<span class="text-xl font-bold mt-2">$10</span>
<ul class="text-sm text-neutral-600 mt-2">
<li>1 Cheese</li>
<li>1 Bacon</li>
</ul>
</label>
</div>
<div class="form-select-card">
<input class="hidden" id="radio_2" type="radio" name="radio">
<label class="select-card" for="radio_2">
<span class="text-xs font-semibold uppercase">Burger Daddy</span>
<span class="text-xl font-bold mt-2">$15</span>
<ul class="text-sm text-neutral-600 mt-2">
<li>6 Cheese</li>
<li>9 Bacon</li>
</ul>
</label>
</div>
</div>
</div>
</div>
<!-- Textarea -->
<div class="tailpipe-textarea">
<h2 class="font-semibold text-xl mt-16">Textarea</h2>
<div class="mt-4">
<div class="mt-2">
<textarea name="" id="" cols="30" rows="5"></textarea>
</div>
<div class="mt-2">
<textarea name="" id="" cols="30" rows="5" class="input-textarea"></textarea>
</div>
</div>
</div>
<!-- Buttons -->
<div class="tailpipe-buttons">
<h2 class="font-semibold text-xl mt-16">Buttons</h2>
<div class="mt-4 ">
<p class="font-semibold">Types</p>
<div class="mt-2 flex flex-wrap gap-2">
<div>
<button>Plain Button</button>
<button class="btn-primary">Primary Button</button>
<button class="btn-default">Default Button</button>
<button class="btn-dashed">Dashed Button</button>
<button class="btn-text">Text Button</button>
<button class="btn-link">Link Button</button>
</div>
</div>
</div>
<div class="mt-4">
<p class="font-semibold">Danger</p>
<div class="mt-2 flex flex-wrap gap-2">
<div>
<button class="btn-danger">Danger Button</button>
<button class="btn-default-danger">Default Button</button>
<button class="btn-dashed-danger">Dashed Button</button>
<button class="btn-text-danger">Text Button</button>
<button class="btn-link-danger">Link Button</button>
</div>
</div>
</div>
<div class="mt-4">
<p class="font-semibold">Shapes</p>
<p class="mt-2 text-sm font-semibold text-gray-500">Rounded</p>
<div class="mt-2 flex flex-wrap gap-2">
<div>
<button class="btn-primary btn-rounded">Rounded</button>
<button class="btn-default btn-rounded">Rounded</button>
<button class="btn-dashed btn-rounded">Rounded</button>
</div>
</div>
<p class="mt-2 text-sm font-semibold text-gray-500">Circle</p>
<div class="mt-2 flex flex-wrap gap-2">
<div>
<button class="btn-primary btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
</button>
<button class="btn-default btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
</button>
<button class="btn-dashed btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
</button>
</div>
</div>
</div>
<div class="mt-8">
<p class="font-semibold">Sizes</p>
<div class="mt-2">
<div class="mt-4">
<p class="mt-2 text-sm font-semibold text-gray-500">XS</p>
<div class="mt-2 flex flex-wrap gap-2">
<div>
<button class="btn-primary btn-xs">Primary Button</button>
<button class="btn-default btn-xs">Default Button</button>
<button class="btn-dashed btn-xs">Dashed Button</button>
<button class="btn-text btn-xs">Text Button</button>
<button class="btn-link btn-xs">Link Button</button>
</div>
</div>
</div>
<div class="mt-4">
<p class="mt-2 text-sm font-semibold text-gray-500">Default</p>
<div class="mt-2 flex flex-wrap gap-2">
<div>
<button class="btn-primary">Primary Button</button>
<button class="btn-default">Default Button</button>
<button class="btn-dashed">Dashed Button</button>
<button class="btn-text">Text Button</button>
<button class="btn-link">Link Button</button>
</div>
</div>
</div>
<div class="mt-4">
<p class="mt-2 text-sm font-semibold text-gray-500">Large</p>
<div class="mt-2 flex flex-wrap gap-2">
<div>
<button class="btn-primary btn-lg">Primary Button</button>
<button class="btn-default btn-lg">Default Button</button>
<button class="btn-dashed btn-lg">Dashed Button</button>
<button class="btn-text btn-lg">Text Button</button>
<button class="btn-link btn-lg">Link Button</button>
</div>
</div>
</div>
<div class="mt-4">
<p class="mt-2 text-sm font-semibold text-gray-500">Extra Large</p>
<div class="mt-2 flex flex-wrap gap-2">
<div>
<button class="btn-primary btn-xl">Primary Button</button>
<button class="btn-default btn-xl">Default Button</button>
<button class="btn-dashed btn-xl">Dashed Button</button>
<button class="btn-text btn-xl">Text Button</button>
<button class="btn-link btn-xl">Link Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="tailpipe-table">
<h2 class="font-semibold text-xl mt-16">Table</h2>
<div class="mt-4">
<div class="mt-2">
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="table">
<thead>
<tr>
<th scope="col">
#
</th>
<th scope="col">
First name
</th>
<th scope="col">
Last name
</th>
<th scope="col">
Age
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
Bill
</td>
<td>
One
</td>
<td>
32
</td>
</tr>
<tr>
<td>2</td>
<td>
Steve
</td>
<td>
Two
</td>
<td>
21
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script defer type="module" src="./dist/tailscript.js"></script>
</body>
</html>