Read Modals (CRUD)
- Default modal
- Read product modal
- Read user modal
- Advanced user read modal
- Read event modal
- Advanced read event modal
Use this collection of CRUD modal components to show information about a data entry from your database and show a list of actions based.
- Requires Flowbite JS
Default modal
Use this free modal component to show a list of data entries from the database based on the CRUD layout system.
Default modal
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="readProductButton"
data-modal-target="readProductModal"
data-modal-toggle="readProductModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Show read modal
</button>
</div>
<!-- Main modal -->
<div
id="readProductModal"
tabindex="-1"
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-xl h-full md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<!-- Modal header -->
<div class="flex justify-between mb-4 rounded-t sm:mb-5">
<div class="text-lg text-gray-900 md:text-xl dark:text-white">
<h3 class="font-semibold">Apple iMac 27”</h3>
<p class="font-bold">$2999</p>
</div>
<div>
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="readProductModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
</div>
<dl>
<dt
class="mb-2 font-semibold leading-none text-gray-900 dark:text-white"
>
Details
</dt>
<dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
Standard glass ,3.8GHz 8-core 10th-generation Intel Core i7 processor,
Turbo Boost up to 5.0GHz, 16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT
with 8GB of GDDR6 memory, 256GB SSD storage, Gigabit Ethernet, Magic
Mouse 2, Magic Keyboard - US.
</dd>
<dt
class="mb-2 font-semibold leading-none text-gray-900 dark:text-white"
>
Category
</dt>
<dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
Electronics/PC
</dd>
</dl>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3 sm:space-x-4">
<button
type="button"
class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<svg
aria-hidden="true"
class="mr-1 -ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
></path>
<path
fill-rule="evenodd"
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
clip-rule="evenodd"
></path>
</svg>
Edit
</button>
<button
type="button"
class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
Preview
</button>
</div>
<button
type="button"
class="inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-1.5 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('readProductButton').click()
})Read product modal
Use this modal component to show images, colors, cards, and text data for an existing product from the database.
Read product modal
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button id="readProductButton" data-modal-target="readProductModal" data-modal-toggle="readProductModal" class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
Read product
</button>
</div>
<!-- Main modal -->
<div id="readProductModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full">
<div class="relative p-4 w-full max-w-3xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
<!-- Modal header -->
<div class="flex justify-between mb-4 rounded-t sm:mb-5">
<div class="text-lg text-gray-900 md:text-xl dark:text-white">
<h3 class="font-semibold ">
Apple iMac 27”
</h3>
<p class="font-bold">
$2999
</p>
</div>
<div>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="readProductModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
</div>
<div class="grid grid-cols-3 gap-4 mb-4 sm:grid-cols-4 sm:mb-5">
<div class="p-2 bg-gray-100 rounded-lg md:w-36 md:h-36 dark:bg-gray-700">
<img src="https://flowbite.s3.amazonaws.com/blocks/application-ui/products/imac-side-image.png" alt="iMac Side Image">
</div>
<div class="p-2 bg-gray-100 rounded-lg md:w-36 md:h-36 dark:bg-gray-700">
<img src="https://flowbite.s3.amazonaws.com/blocks/application-ui/products/imac-front-image.png" alt="iMac Front Image">
</div>
<div class="p-2 bg-gray-100 rounded-lg md:w-36 md:h-36 dark:bg-gray-700">
<img src="https://flowbite.s3.amazonaws.com/blocks/application-ui/products/imac-back-image.png" alt="iMac Back Image">
</div>
<div class="p-2 bg-gray-100 rounded-lg md:w-36 md:h-36 dark:bg-gray-700">
<img src="https://flowbite.s3.amazonaws.com/blocks/application-ui/products/imac-back-image.png" alt="iMac Back Image">
</div>
</div>
<dl class="sm:mb-5">
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Details</dt>
<dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">Standard glass ,3.8GHz 8-core 10th-generation Intel Core i7 processor, Turbo Boost up to 5.0GHz, 16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT with 8GB of GDDR6 memory, 256GB SSD storage, Gigabit Ethernet, Magic Mouse 2, Magic Keyboard - US.</dd>
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Colors</dt>
<dd class="flex items-center mb-4 space-x-2 font-light text-gray-500 dark:text-gray-400">
<div class="w-6 h-6 bg-purple-600 rounded-full"></div>
<div class="w-6 h-6 bg-indigo-400 rounded-full"></div>
<div class="w-6 h-6 rounded-full bg-primary-600"></div>
<div class="w-6 h-6 bg-pink-400 rounded-full"></div>
<div class="w-6 h-6 bg-teal-300 rounded-full"></div>
<div class="w-6 h-6 bg-green-300 rounded-full"></div>
</dd>
</dl>
<dl class="grid grid-cols-2 gap-4 mb-4 sm:grid-cols-3 sm:mb-5">
<div class="p-3 bg-gray-100 rounded-lg dark:bg-gray-700">
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Sold by</dt>
<dd class="text-gray-500 dark:text-gray-400">Flowbite</dd>
</div>
<div class="p-3 bg-gray-100 rounded-lg dark:bg-gray-700">
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Ships from</dt>
<dd class="text-gray-500 dark:text-gray-400">Flowbite</dd>
</div>
<div class="p-3 bg-gray-100 rounded-lg dark:bg-gray-700">
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Product State</dt>
<dd class="text-gray-500 dark:text-gray-400">
<span class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800">
<svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
New
</span>
</dd>
</div>
<div class="p-3 bg-gray-100 rounded-lg dark:bg-gray-700">
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Shipping</dt>
<dd class="flex items-center text-gray-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-1.5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
Worldwide
</dd>
</div>
<div class="p-3 bg-gray-100 rounded-lg dark:bg-gray-700">
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Dimensions (cm)</dt>
<dd class="text-gray-500 dark:text-gray-400">105 x 15 x 23</dd>
</div>
<div class="p-3 bg-gray-100 rounded-lg dark:bg-gray-700">
<dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Item weight</dt>
<dd class="text-gray-500 dark:text-gray-400">12kg</dd>
</div>
</dl>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3 sm:space-x-4">
<button type="button" class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
<svg aria-hidden="true" class="mr-1 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
Edit
</button>
<button type="button" class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
Preview
</button>
</div>
<button type="button" class="inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900">
<svg aria-hidden="true" class="w-5 h-5 mr-1.5 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
Delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('readProductButton').click()
})Read user modal
This example can be used to show the information about a user from the database inside a responsive modal component.
Read user modal
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="readUserButton"
data-modal-target="readUserModal"
data-modal-toggle="readUserModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Read user
</button>
</div>
<!-- Main modal -->
<div
id="readUserModal"
tabindex="-1"
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-xl h-full md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<!-- Modal header -->
<div class="flex justify-between mb-4 rounded-t sm:mb-5">
<div>
<h3
class="text-lg font-bold text-gray-900 md:text-xl dark:text-white"
>
Helene Engels
</h3>
<p class="text-base font-light text-gray-500 dark:text-gray-400">
Moderator
</p>
</div>
<div>
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="readUserModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
</div>
<dl>
<dt
class="mb-2 font-semibold leading-none text-gray-900 dark:text-white"
>
Email
</dt>
<dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
helene@company.com
</dd>
<dt
class="mb-2 font-semibold leading-none text-gray-900 dark:text-white"
>
Biography
</dt>
<dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
Hello, I'm Helene Engels, USA Designer, Creating things that stand
out, Featured by Adobe, Figma, Webflow and others, Daily design tips &
resources, Exploring Web3.
</dd>
</dl>
<div class="flex justify-between items-center">
<button
type="button"
class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<svg
aria-hidden="true"
class="mr-1 -ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
></path>
<path
fill-rule="evenodd"
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
clip-rule="evenodd"
></path>
</svg>
Edit
</button>
<button
type="button"
class="inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-1.5 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('readUserButton').click()
})Advanced user read modal
Use this modal component to show detailed information about a user from your database including the profile picture, name, biography, and CRUD action buttons.
Advanced user read modal
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="readUserButton"
data-modal-target="readUserModal"
data-modal-toggle="readUserModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Read user
</button>
</div>
<!-- Main modal -->
<div
id="readUserModal"
tabindex="-1"
aria-hidden="true"
class="fixed top-0 left-0 right-0 z-50 items-center justify-center hidden w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
>
<div class="relative w-full h-full max-w-3xl p-4 md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<!-- Modal header -->
<div class="flex justify-between mb-4 rounded-t sm:mb-5">
<div class="flex items-center">
<img
class="w-12 h-12 mr-2 rounded-full sm:mr-4"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/helene-engels.png"
alt="Helene avatar"
/>
<div>
<h3
class="text-lg font-bold text-gray-900 md:text-xl dark:text-white"
>
Helene Engels
</h3>
<p class="text-base font-light text-gray-500 dark:text-gray-400">
Moderator
</p>
</div>
</div>
<div>
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="readUserModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
</div>
<div class="grid gap-4 mb-4 sm:grid-cols-2 sm:gap-6 sm:mb-5">
<dl>
<dt class="sr-only">Role</dt>
<dd
class="flex items-center mb-2 font-light text-gray-500 dark:text-gray-400"
>
<svg
class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
<path
d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
></path>
</svg>
Frontend Developer
</dd>
<dt class="sr-only">Location</dt>
<dd
class="flex items-center mb-4 font-light text-gray-500 dark:text-gray-400 sm:mb-5"
>
<svg
class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
></path>
</svg>
United States of America
</dd>
<dt class="mb-2 leading-none text-gray-500 dark:text-gray-400">
Email Adress
</dt>
<dd class="mb-4 font-medium text-gray-900 sm:mb-5 dark:text-white">
helene@company.com
</dd>
<dt class="mb-2 leading-none text-gray-500 dark:text-gray-400">
Home Adress
</dt>
<dd class="mb-4 font-medium text-gray-900 sm:mb-5 dark:text-white">
92 Miles Drive, Newark, NJ 07103, California, United States of
America
</dd>
<dt class="mb-2 leading-none text-gray-500 dark:text-gray-400">
Phone Number
</dt>
<dd class="font-medium text-gray-900 dark:text-white">
+1234 567 890 / +12 345 678
</dd>
</dl>
<dl>
<dt
class="mb-2 font-semibold leading-none text-gray-900 dark:text-white"
>
Biography
</dt>
<dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
Hello, I'm Helene Engels, USA Designer, Creating things that stand
out, Featured by Adobe, Figma, Webflow and others, Daily design tips
& resources, Exploring Web3.
</dd>
<dt
class="mb-2 font-semibold leading-none text-gray-900 dark:text-white"
>
Social
</dt>
<dd class="inline-flex items-center space-x-1">
<a
href="#"
class="p-2 text-gray-500 rounded-lg hover:text-gray-900 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
href="#"
class="p-2 text-gray-500 rounded-lg hover:text-gray-900 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
href="#"
class="p-2 text-gray-500 rounded-lg hover:text-gray-900 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
href="#"
class="p-2 text-gray-500 rounded-lg hover:text-gray-900 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clip-rule="evenodd"
/>
</svg>
</a>
</dd>
</dl>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3 sm:space-x-4">
<button
type="button"
class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-1 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
></path>
<path
fill-rule="evenodd"
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
clip-rule="evenodd"
></path>
</svg>
Edit
</button>
<button
type="button"
class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
Preview
</button>
</div>
<button
type="button"
class="inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-1.5 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('readUserButton').click()
})Read event modal
Use this modal component to show the title, date, location, and details of an event from the database.
Read event modal
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="readEventButton"
data-modal-target="readEventModal"
data-modal-toggle="readEventModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Read event
</button>
</div>
<!-- Main modal -->
<div
id="readEventModal"
tabindex="-1"
aria-hidden="true"
class="fixed top-0 left-0 right-0 z-50 items-center justify-center hidden w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
>
<div class="relative w-full h-full max-w-md p-4 md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<!-- Modal header -->
<div
class="flex items-center justify-between pb-4 mb-4 border-b border-gray-200 rounded-t sm:mb-5 dark:border-gray-700"
>
<h3 class="font-semibold text-gray-900 dark:text-white">
The 4th Digital Transformation
</h3>
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="readEventModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<dl class="mb-4 sm:mb-5">
<dt class="sr-only">Date</dt>
<dd
class="flex items-center mb-2 font-light text-gray-500 dark:text-gray-400"
>
<svg
class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
<span class="font-medium text-gray-900 dark:text-white"
>26th November, 2022</span
>
</dd>
<dt class="sr-only">Location</dt>
<dd
class="flex items-center mb-4 font-light text-gray-500 dark:text-gray-400 sm:mb-5"
>
<svg
class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
></path>
</svg>
<span class="font-medium text-gray-900 dark:text-white"
>California, USA</span
>
</dd>
<dt
class="mb-2 font-semibold leading-none text-gray-900 dark:text-white"
>
Details
</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
The 4th Digital Transformation and Industry 4.0 Free Online Conference
Organized by Flowbite and Themesberg, Live on Saturday 26th Nov at
02:00 pm GMT | 04:00 pm EET on Zoom Webinars
</dd>
</dl>
<div class="flex items-center space-x-4">
<button
type="button"
class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-1 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
></path>
<path
fill-rule="evenodd"
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
clip-rule="evenodd"
></path>
</svg>
Edit
</button>
<button
type="button"
class="inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-1.5 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('readEventButton').click()
})Advanced read event modal
This example can be used to show the details of an event inside a responsive modal component coded with Tailwind CSS.
Advanced read event modal
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="readEventButton"
data-modal-target="readEventModal"
data-modal-toggle="readEventModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Read event modal
</button>
</div>
<!-- Main modal -->
<div
id="readEventModal"
tabindex="-1"
aria-hidden="true"
class="fixed top-0 left-0 right-0 z-50 items-center justify-center hidden w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
>
<div class="relative w-full h-full max-w-3xl p-4 md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<!-- Modal header -->
<div
class="flex items-center justify-between pb-4 mb-4 border-b border-gray-200 rounded-t sm:mb-5 dark:border-gray-700"
>
<h3 class="font-semibold text-gray-900 dark:text-white">
The 4th Digital Transformation
</h3>
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="readEventModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<div class="grid gap-4 mb-4 sm:grid-cols-2 sm:gap-6 sm:mb-5">
<dl
class="p-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600"
>
<dt class="sr-only">Date</dt>
<dd
class="flex items-center mb-2 font-light text-gray-500 dark:text-gray-400"
>
<svg
class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
<span class="font-medium text-gray-900 dark:text-white"
>26th November, 2022</span
>
</dd>
<dt class="sr-only">Location</dt>
<dd
class="flex items-center mb-4 font-light text-gray-500 dark:text-gray-400 sm:mb-5"
>
<svg
class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
></path>
</svg>
<span class="font-medium text-gray-900 dark:text-white"
>California, USA</span
>
</dd>
<dt class="mb-2 leading-none text-gray-500 dark:text-gray-400">
Participants
</dt>
<dd class="flex mb-4 -space-x-4 sm:mb-5">
<img
class="w-8 h-8 border-2 rounded-full border-gray-50 dark:border-gray-700"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/helene-engels.png"
alt="Helene Engels"
/>
<img
class="w-8 h-8 border-2 rounded-full border-gray-50 dark:border-gray-700"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/robert-brown.png"
alt="Robert Brown"
/>
<img
class="w-8 h-8 border-2 rounded-full border-gray-50 dark:border-gray-700"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
alt="Bonnie Green"
/>
<button
type="button"
class="flex items-center justify-center w-8 h-8 text-xs font-medium text-white bg-gray-600 border-2 rounded-full border-gray-50 hover:bg-gray-500 dark:border-gray-700"
>
+9
</button>
</dd>
<dt class="mb-2 leading-none text-gray-500 dark:text-gray-400">
Online
</dt>
<dd class="mb-4 font-medium text-gray-900 sm:mb-5 dark:text-white">
Google Meet
</dd>
<dt class="mb-2 leading-none text-gray-500 dark:text-gray-400">
Duration
</dt>
<dd class="font-medium text-gray-900 dark:text-white">All day</dd>
</dl>
<dl>
<dt
class="mb-2 font-semibold leading-none text-gray-900 dark:text-white"
>
Details
</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
The 4th Digital Transformation and Industry 4.0 Free Online
Conference Organized by Flowbite and Themesberg, Live on Saturday
26th Nov at 02:00 pm GMT | 04:00 pm EET on Zoom Webinars
</dd>
</dl>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3 sm:space-x-4">
<button
type="button"
class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-1 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
></path>
<path
fill-rule="evenodd"
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
clip-rule="evenodd"
></path>
</svg>
Edit
</button>
<button
type="button"
class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
Preview
</button>
</div>
<button
type="button"
class="inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-1.5 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('readEventButton').click()
})