Skip to content

Instantly share code, notes, and snippets.

@usutani

usutani/tailwind-sample-modal-layout.html

Last active June 10, 2020 02:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save usutani/48860cba6282bc5ab304a2d8a89d4ec3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save usutani/48860cba6282bc5ab304a2d8a89d4ec3 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind CSS - Modal layout: See https://www.tailwindtoolbox.com/components/modal
Raw
tailwind-sample-modal-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS Modal</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="flex flex-col">
<div class="bg-blue-500 m-3 py-20 px-4">text</div>
<div class="bg-blue-500 m-3 py-20 px-4">text</div>
<div class="bg-blue-500 m-3 py-20 px-4">text</div>
</div>
<!--Modal-->
<div class="fixed w-full h-full top-0 left-0 flex items-center">
<div class="bg-gray-300 w-11/12 md:max-w-md mx-auto">Modal</div>
</div>
</body>
</html>
@usutani
Copy link
Copy Markdown
Author

usutani commented Jun 10, 2020

lt-md
gt-md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment