Bootstrap V5 components in Tailwind

tailwind-bootstrap.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.alert { @apply relative p-4 mb-4 border rounded; }
.alert-primary { @apply text-blue-900 bg-blue-100 border-blue-200; }
.alert-secondary { @apply text-gray-900 bg-gray-200 border-gray-300; }
.alert-light { @apply text-gray-500 bg-gray-50 border-gray-50; }
.alert-dark { @apply text-gray-900 bg-gray-300 border-gray-200; }
.alert-success { @apply text-green-900 bg-green-100 border-green-200; }
.alert-danger { @apply text-red-900 bg-red-100 border-red-200; }
.alert-warning { @apply text-yellow-900 bg-yellow-100 border-yellow-200; }
.alert-info { @apply text-cyan-900 bg-cyan-100 border-cyan-200; }

.badge {
  @apply inline-block px-2 py-1 text-xs font-bold text-white whitespace-nowrap align-baseline rounded leading-none;
}

.breadcrumb {
  @apply flex flex-wrap p-0 mb-4 list-none;
}

.breadcrumb-item.active {
  @apply text-gray-500;
}

.breadcrumb-item+.breadcrumb-item::before {
  @apply float-left pr-1 text-gray-500;
  content: '/';
}

.breadcrumb-item+.breadcrumb-item {
  @apply pl-2;
}

.btn {
  @apply inline-block font-normal leading-normal text-gray-900 text-center no-underline align-middle cursor-pointer select-none border border-transparent px-3 py-1.5 text-base rounded focus:ring-4;
}

.btn.disabled, .btn:disabled {
  @apply pointer-events-none opacity-60;
}

.btn-close {
  @apply box-content w-4 h-4 p-1 text-black rounded-md opacity-50;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;    border: 0;
}

.btn-close.disabled, .btn-close:disabled {
  @apply pointer-events-none select-none opacity-25;
}

.btn-close-white {
  @apply invert;
}

.btn-group-lg>.btn, .btn-lg {
  @apply text-xl px-4 py-2 rounded-md;
}

.btn-group-sm>.btn, .btn-sm {
  @apply text-sm px-2 py-1 rounded-md;
}

.btn-primary {
  @apply text-white bg-blue-600 border-blue-600 active:bg-blue-800 focus:ring-blue-500 focus:ring-opacity-50 focus:bg-blue-700 hover:bg-blue-700;
}
.btn-secondary {
  @apply text-white bg-gray-500 border-gray-500 active:bg-gray-700 focus:ring-gray-400 focus:ring-opacity-50 focus:bg-gray-600 hover:bg-gray-600;
}
.btn-dark {
  @apply text-white bg-gray-900 border-gray-900 active:bg-gray-900 focus:ring-gray-700 focus:ring-opacity-50 focus:bg-gray-900 hover:bg-gray-900;
}
.btn-success {
  @apply text-white bg-green-600 border-green-600 active:bg-green-800 focus:ring-green-500 focus:ring-opacity-50 focus:bg-green-700 hover:bg-green-700;
}
.btn-danger {
  @apply text-white bg-red-600 border-red-600 active:bg-red-800 focus:ring-red-500 focus:ring-opacity-50 focus:bg-red-700 hover:bg-red-700;
}
.btn-warning {
  @apply text-black bg-yellow-400 border-yellow-400 active:bg-yellow-400 focus:ring-yellow-400 focus:ring-opacity-50 focus:bg-yellow-300 hover:bg-yellow-300;
}
.btn-info {
  @apply text-black bg-cyan-400 border-cyan-400 active:bg-cyan-400 focus:ring-cyan-500 focus:ring-opacity-50 focus:bg-cyan-300 hover:bg-cyan-300;
}
.btn-link {
  @apply font-normal text-blue-600 underline;
}
.btn-light {
  @apply text-black bg-gray-50 border-gray-50 focus:ring-gray-300 focus:ring-opacity-50;
}

.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
  @apply bg-blue-800;
}

.btn-check:active+.btn-secondary, .btn-check:checked+.btn-secondary, .btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
  @apply bg-gray-700;
}

.btn-check:active+.btn-dark, .btn-check:checked+.btn-dark, .btn-dark.active, .btn-dark:active, .show>.btn-dark.dropdown-toggle {
  @apply bg-gray-900;
}

.btn-check:active+.btn-success, .btn-check:checked+.btn-success, .btn-success.active, .btn-success:active, .show>.btn-success.dropdown-toggle {
  @apply bg-green-800;
}

.btn-check:active+.btn-danger, .btn-check:checked+.btn-danger, .btn-danger.active, .btn-danger:active, .show>.btn-danger.dropdown-toggle {
  @apply bg-red-800;
}

.btn-check:active+.btn-warning, .btn-check:checked+.btn-warning, .btn-warning.active, .btn-warning:active, .show>.btn-warning.dropdown-toggle {
  @apply bg-yellow-400;
}

.btn-check:active+.btn-info, .btn-check:checked+.btn-info, .btn-info.active, .btn-info:active, .show>.btn-info.dropdown-toggle {
  @apply bg-cyan-400;
}

.btn-outline-primary {
  @apply text-blue-500 border-blue-500 focus:ring-blue-500 focus:ring-opacity-50 hover:text-white hover:bg-blue-500
}
.btn-outline-secondary {
  @apply text-gray-500 border-gray-500 focus:ring-gray-400 focus:ring-opacity-50 hover:text-white hover:bg-gray-500;
}
.btn-outline-light {
  @apply text-gray-50 border-gray-50 focus:ring-gray-300 focus:ring-opacity-50 hover:text-black hover:bg-gray-50;
}
.btn-outline-dark {
  @apply text-gray-900 border-gray-900 focus:ring-gray-700 focus:ring-opacity-50 hover:text-white hover:bg-gray-900;
}
.btn-outline-success {
  @apply text-green-600 border-green-600 focus:ring-green-500 focus:ring-opacity-50 hover:text-white hover:bg-green-600;
}
.btn-outline-danger {
  @apply text-red-600 border-red-600 focus:ring-red-500 focus:ring-opacity-50 hover:text-white hover:bg-red-600;
}
.btn-outline-warning {
  @apply text-yellow-400 border-yellow-400 focus:ring-yellow-400 focus:ring-opacity-50 hover:text-black hover:bg-yellow-400;
}
.btn-outline-info {
  @apply text-cyan-400 border-cyan-400 focus:ring-cyan-500 focus:ring-opacity-50 hover:text-black hover:bg-cyan-400;
}

.btn-group, .btn-group-vertical {
  @apply relative inline-flex align-middle;
}

.btn-group-vertical {
  @apply flex-col items-start justify-center;
}

.btn-group-vertical>.btn, .btn-group>.btn {
  @apply relative flex-auto;
}

.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:nth-child(n+3), .btn-group>:not(.btn-check)+.btn {
  @apply rounded-l-none;
}

.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
  @apply rounded-r-none;
}

.btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {
  margin-left: -1px;
}

.btn-group-vertical>.btn-group:not(:last-child)>.btn, .btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle) {
  @apply rounded-b-none;
}
.btn-group-vertical>.btn-group:not(:first-child)>.btn, .btn-group-vertical>.btn~.btn {
  @apply rounded-t-none;
}

.card {
  @apply relative flex flex-col min-w-0 break-words bg-white border border-black border-opacity-10 rounded-sm bg-clip-border;
}

.card-img, .card-img-top {
  @apply rounded-t;
}

.card-img, .card-img-bottom, .card-img-top {
  @apply w-full;
}

.card-body {
  @apply flex-auto p-4;
}

.card-title {
  @apply mb-2;
}

.card-text:last-child {
  @apply mb-0;
}

.card-link+.card-link {
  @apply ml-4;
}

.card-header {
  @apply px-4 py-2 mb-0 bg-black bg-opacity-5 border-black border-b border-opacity-10;
}

.card-header:first-child {
  @apply rounded-t-md;
}

.card-footer:last-child {
  @apply rounded-b-md;
}

.card-footer {
  @apply px-4 py-2 mb-0 bg-black bg-opacity-5 border-black border-t border-opacity-10;
}

.card>.list-group {
    border-top: inherit;
    border-bottom: inherit;
}

.list-group {
  @apply flex flex-col pl-0 mb-0 rounded-md;
}

.list-group-flush {
  @apply rounded-none;
}

.list-group-item {
  @apply relative block px-4 py-2 text-gray-900 no-underline bg-white border border-black border-opacity-10;
}

.list-group-item:first-child {
  @apply rounded-t-none;
}

.list-group-flush>.list-group-item {
  @apply border-0 border-b;
}

.rounded-pill {
  @apply rounded-full;
}

.text-primary { @apply text-blue-900; }
.text-secondary { @apply text-gray-900; }
.text-light { @apply text-gray-500; }
.text-dark { @apply text-gray-900; }
.text-success { @apply text-green-900; }
.text-danger { @apply text-red-900; }
.text-warning { @apply text-yellow-900; }
.text-info { @apply text-cyan-900; }
.text-muted { @apply text-gray-500; }

.bg-light { @apply bg-gray-50; }
.bg-primary { @apply bg-blue-600; }
.bg-secondary { @apply bg-gray-500; }
.bg-dark { @apply bg-gray-900; }
.bg-success { @apply bg-green-600; }
.bg-danger { @apply bg-red-600; }
.bg-warning { @apply bg-yellow-400; }
.bg-info { @apply bg-cyan-400; }

.border-primary { @apply border-blue-200; }
.border-secondary { @apply border-gray-300; }
.border-light { @apply border-gray-50; }
.border-dark { @apply border-gray-200; }
.border-success { @apply border-green-200; }
.border-danger { @apply border-red-200; }
.border-warning { @apply border-yellow-200; }
.border-info { @apply border-cyan-200; }

/*

<div class="bd-example">
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
</div>

<div>
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>

<div class="bd-example bg-dark">
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled="" aria-label="Close"></button>
</div>

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

<div class="card" style="width: 18rem;">
  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-dark">Button</button>
    <button type="button" class="btn btn-dark">Button</button>
    <button type="button" class="btn btn-dark">Button</button>
    <button type="button" class="btn btn-dark">Button</button>
    <button type="button" class="btn btn-dark">Button</button>
    <button type="button" class="btn btn-dark">Button</button>
</div>
<div class="bd-example">
  <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
    <button type="button" class="btn btn-outline-dark">Left</button>
    <button type="button" class="btn btn-outline-dark">Middle</button>
    <button type="button" class="btn btn-outline-dark">Right</button>
  </div>
  <br>
  <div class="btn-group" role="group" aria-label="Default button group">
    <button type="button" class="btn btn-outline-dark">Left</button>
    <button type="button" class="btn btn-outline-dark">Middle</button>
    <button type="button" class="btn btn-outline-dark">Right</button>
  </div>
  <br>
  <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
    <button type="button" class="btn btn-outline-dark">Left</button>
    <button type="button" class="btn btn-outline-dark">Middle</button>
    <button type="button" class="btn btn-outline-dark">Right</button>
  </div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>
<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
<div>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
</div>

<div>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
</div>

<div>
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</div>

<div>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-success">New</span></h3>
<h4>Example heading <span class="badge bg-danger">New</span></h4>
<h5>Example heading <span class="badge bg-warning">New</span></h5>
<h6>Example heading <span class="badge bg-info">New</span></h6>
<h6>Example heading <span class="badge bg-light">New</span></h6>
<h6>Example heading <span class="badge bg-dark">New</span></h6>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>


*/