Basic Layouts
Quickly get a project started with any of our examples ranging from using parts of the UI to custom components and layouts using Tailwind CSS.
Cover Page with Form
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main" class="relative max-w-3xl px-4 sm:px-6 lg:px-8 flex flex-col justify-center sm:items-center mx-auto w-full h-full before:absolute before:top-0 before:left-1/2 before:bg-[url('../svg/component/squared-bg-element-dark.svg')] before:bg-no-repeat before:bg-top before:w-full before:h-full before:-z-[1] before:transform before:-translate-x-1/2">
<div class="text-center py-8 px-4 sm:px-6 lg:px-8">
<svg class="w-20 sm:w-28 h-auto mx-auto mb-4 sm:mb-8" width="116" height="41" viewBox="0 0 116 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.5696 34.3182V14.8182H37.4474V17.2003H37.6229C37.7952 16.8187 38.0445 16.4309 38.3707 16.0369C38.7031 15.6368 39.134 15.3045 39.6634 15.0398C40.1989 14.7689 40.8636 14.6335 41.6577 14.6335C42.6918 14.6335 43.6458 14.9044 44.5199 15.446C45.3939 15.9815 46.0926 16.791 46.6158 17.8743C47.139 18.9515 47.4006 20.3026 47.4006 21.9276C47.4006 23.5095 47.1451 24.8452 46.6342 25.9347C46.1295 27.018 45.4401 27.8397 44.5661 28.3999C43.6982 28.9538 42.7256 29.2308 41.6484 29.2308C40.8852 29.2308 40.2358 29.1046 39.7003 28.8523C39.1709 28.5999 38.737 28.2829 38.3984 27.9013C38.0599 27.5135 37.8014 27.1226 37.6229 26.7287H37.5028V34.3182H33.5696ZM37.4197 21.9091C37.4197 22.7524 37.5367 23.4879 37.7706 24.1158C38.0045 24.7436 38.343 25.233 38.7862 25.5838C39.2294 25.9285 39.768 26.1009 40.402 26.1009C41.0421 26.1009 41.5838 25.9254 42.027 25.5746C42.4702 25.2176 42.8056 24.7251 43.0334 24.0973C43.2673 23.4633 43.3842 22.7339 43.3842 21.9091C43.3842 21.0904 43.2704 20.3703 43.0426 19.7486C42.8149 19.1269 42.4794 18.6406 42.0362 18.2898C41.593 17.9389 41.0483 17.7635 40.402 17.7635C39.7618 17.7635 39.2202 17.9328 38.777 18.2713C38.34 18.6098 38.0045 19.09 37.7706 19.7116C37.5367 20.3333 37.4197 21.0658 37.4197 21.9091ZM49.2427 29V14.8182H53.0559V17.2926H53.2037C53.4622 16.4124 53.8961 15.7476 54.5055 15.2983C55.1149 14.8428 55.8166 14.6151 56.6106 14.6151C56.8076 14.6151 57.02 14.6274 57.2477 14.652C57.4754 14.6766 57.6755 14.7105 57.8478 14.7536V18.2436C57.6632 18.1882 57.4077 18.139 57.0815 18.0959C56.7553 18.0528 56.4567 18.0312 56.1859 18.0312C55.6073 18.0312 55.0903 18.1574 54.6348 18.4098C54.1854 18.656 53.8284 19.0007 53.5638 19.4439C53.3052 19.8871 53.176 20.398 53.176 20.9766V29H49.2427ZM64.9043 29.277C63.4455 29.277 62.1898 28.9815 61.1373 28.3906C60.0909 27.7936 59.2845 26.9503 58.7182 25.8608C58.1519 24.7652 57.8688 23.4695 57.8688 21.9737C57.8688 20.5149 58.1519 19.2346 58.7182 18.1328C59.2845 17.031 60.0816 16.1723 61.1096 15.5568C62.1437 14.9413 63.3563 14.6335 64.7474 14.6335C65.683 14.6335 66.5539 14.7843 67.3603 15.0859C68.1728 15.3814 68.8806 15.8277 69.4839 16.4247C70.0932 17.0218 70.5672 17.7727 70.9057 18.6776C71.2443 19.5762 71.4135 20.6288 71.4135 21.8352V22.9155H59.4384V20.478H67.7111C67.7111 19.9117 67.588 19.41 67.3418 18.973C67.0956 18.536 66.754 18.1944 66.317 17.9482C65.8861 17.6958 65.3844 17.5696 64.812 17.5696C64.2149 17.5696 63.6856 17.7081 63.2239 17.9851C62.7684 18.2559 62.4114 18.6222 62.1529 19.0838C61.8944 19.5393 61.762 20.0471 61.7559 20.6072V22.9247C61.7559 23.6264 61.8851 24.2327 62.1437 24.7436C62.4083 25.2545 62.7807 25.6484 63.2608 25.9254C63.741 26.2024 64.3103 26.3409 64.9689 26.3409C65.406 26.3409 65.8061 26.2794 66.1692 26.1562C66.5324 26.0331 66.8432 25.8485 67.1018 25.6023C67.3603 25.3561 67.5572 25.0545 67.6927 24.6974L71.3304 24.9375C71.1458 25.8116 70.7672 26.5748 70.1948 27.2273C69.6285 27.8736 68.896 28.3783 67.9974 28.7415C67.1048 29.0985 66.0738 29.277 64.9043 29.277ZM77.1335 10.0909V29H73.2003V10.0909H77.1335ZM79.5043 29V14.8182H83.4375V29H79.5043ZM81.4801 12.9901C80.8954 12.9901 80.3937 12.7962 79.9752 12.4084C79.5628 12.0144 79.3566 11.5436 79.3566 10.9957C79.3566 10.4541 79.5628 9.98935 79.9752 9.60156C80.3937 9.20762 80.8954 9.01065 81.4801 9.01065C82.0649 9.01065 82.5635 9.20762 82.9759 9.60156C83.3944 9.98935 83.6037 10.4541 83.6037 10.9957C83.6037 11.5436 83.3944 12.0144 82.9759 12.4084C82.5635 12.7962 82.0649 12.9901 81.4801 12.9901ZM89.7415 20.8011V29H85.8083V14.8182H89.5569V17.3203H89.723C90.037 16.4955 90.5632 15.843 91.3019 15.3629C92.0405 14.8767 92.9361 14.6335 93.9887 14.6335C94.9735 14.6335 95.8322 14.849 96.5647 15.2798C97.2971 15.7107 97.8665 16.3262 98.2728 17.1264C98.679 17.9205 98.8821 18.8684 98.8821 19.9702V29H94.9489V20.6719C94.9551 19.804 94.7335 19.1269 94.2841 18.6406C93.8348 18.1482 93.2162 17.902 92.4283 17.902C91.8989 17.902 91.4311 18.0159 91.0249 18.2436C90.6248 18.4714 90.3109 18.8037 90.0831 19.2408C89.8615 19.6716 89.7477 20.1918 89.7415 20.8011ZM107.665 29.277C106.206 29.277 104.951 28.9815 103.898 28.3906C102.852 27.7936 102.045 26.9503 101.479 25.8608C100.913 24.7652 100.63 23.4695 100.63 21.9737C100.63 20.5149 100.913 19.2346 101.479 18.1328C102.045 17.031 102.842 16.1723 103.87 15.5568C104.905 14.9413 106.117 14.6335 107.508 14.6335C108.444 14.6335 109.315 14.7843 110.121 15.0859C110.934 15.3814 111.641 15.8277 112.245 16.4247C112.854 17.0218 113.328 17.7727 113.667 18.6776C114.005 19.5762 114.174 20.6288 114.174 21.8352V22.9155H102.199V20.478H110.472C110.472 19.9117 110.349 19.41 110.103 18.973C109.856 18.536 109.515 18.1944 109.078 17.9482C108.647 17.6958 108.145 17.5696 107.573 17.5696C106.976 17.5696 106.446 17.7081 105.985 17.9851C105.529 18.2559 105.172 18.6222 104.914 19.0838C104.655 19.5393 104.523 20.0471 104.517 20.6072V22.9247C104.517 23.6264 104.646 24.2327 104.905 24.7436C105.169 25.2545 105.542 25.6484 106.022 25.9254C106.502 26.2024 107.071 26.3409 107.73 26.3409C108.167 26.3409 108.567 26.2794 108.93 26.1562C109.293 26.0331 109.604 25.8485 109.863 25.6023C110.121 25.3561 110.318 25.0545 110.454 24.6974L114.091 24.9375C113.907 25.8116 113.528 26.5748 112.956 27.2273C112.389 27.8736 111.657 28.3783 110.758 28.7415C109.866 29.0985 108.835 29.277 107.665 29.277Z" fill="white"/>
<path d="M1 33V20C1 13.3726 6.37258 8 13 8C19.6274 8 25 13.3726 25 20C25 26.6274 19.6274 32 13 32H12" stroke="white" stroke-width="2"/>
<path d="M5 33V20.16C5 15.6534 8.58172 12 13 12C17.4183 12 21 15.6534 21 20.16C21 24.6666 17.4183 28.32 13 28.32H12" stroke="white" stroke-width="2"/>
<circle cx="13" cy="20.0215" r="5" fill="white"/>
</svg>
<h1 class="text-2xl text-white sm:text-4xl">
Get notified when we launch
</h1>
<h2 class="mt-1 sm:mt-3 text-4xl font-bold text-white sm:text-6xl">
<span class="bg-clip-text bg-gradient-to-tr from-blue-600 to-purple-400 text-transparent">Preline PRO</span>
</h2>
<form>
<div class="mt-8 space-y-4">
<div>
<label for="hs-cover-with-gradient-form-name-1" class="sr-only">Full name</label>
<div class="relative">
<input type="text" id="hs-cover-with-gradient-form-name-1" class="py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 text-white placeholder:text-white rounded-md text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11" placeholder="Full name">
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-20 ps-4">
<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
</div>
</div>
<div>
<label for="hs-cover-with-gradient-form-email-1" class="sr-only">Email address</label>
<div class="relative">
<input type="email" id="hs-cover-with-gradient-form-email-1" class="py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 text-white placeholder:text-white rounded-md text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11" placeholder="Email address">
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-20 ps-4">
<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
</div>
</div>
</div>
<div class="grid">
<button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md bg-white/10 border border-transparent font-medium text-white hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/30 transition-all text-sm sm:p-4">
Join the waitlist
<svg class="w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</div>
</form>
</div>
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== FOOTER ========== -->
<footer class="absolute bottom-0 inset-x-0 text-center py-5">
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-sm text-white/50">© 2023 Preline. A product of <a class="text-white font-medium hover:text-white/80" href="../index.html">Htmlstream</a></p>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Cover Page
<html class="h-full">
<body class="bg-slate-900 flex h-full">
<div class="max-w-[50rem] flex flex-col mx-auto w-full h-full">
<!-- ========== HEADER ========== -->
<header class="mb-auto flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full text-sm py-4">
<nav class="w-full px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global">
<div class="flex items-center justify-between">
<a class="flex-none text-xl font-semibold text-white" href="#" aria-label="Brand">Brand</a>
<div class="sm:hidden">
<button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border border-gray-700 hover:border-gray-600 font-medium text-gray-300 hover:text-white shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-blue-600 transition-all text-sm" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
<svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
<svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
</div>
</div>
<div id="navbar-collapse-with-animation" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
<div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
<a class="font-medium text-white" href="#" aria-current="page">Landing</a>
<a class="font-medium text-gray-400 hover:text-gray-500" href="#">Account</a>
<a class="font-medium text-gray-400 hover:text-gray-500" href="#">Work</a>
<a class="font-medium text-gray-400 hover:text-gray-500" href="#">Blog</a>
</div>
</div>
</nav>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<div class="text-center py-10 px-4 sm:px-6 lg:px-8">
<h1 class="block text-2xl font-bold text-white sm:text-4xl">Cover Page</h1>
<p class="mt-3 text-lg text-gray-300">Cover is a one-page template for building simple and beautiful home pages using Tailwind CSS.</p>
<div class="mt-5 flex flex-col justify-center items-center gap-2 sm:flex-row sm:gap-3">
<a class="w-full sm:w-auto inline-flex justify-center items-center gap-x-3.5 text-center bg-white shadow-sm text-sm font-medium rounded-md hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-slate-900 transition py-3 px-4" href="https://github.com/htmlstreamofficial/preline/tree/main/examples/html" target="_blank">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
Get the source code
</a>
<a class="w-full sm:w-auto inline-flex justify-center items-center gap-x-3.5 text-center border border-2 border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-300 hover:text-white hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-800 transition py-3 px-4" href="../examples.html">
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Back to examples
</a>
</div>
</div>
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== FOOTER ========== -->
<footer class="mt-auto text-center py-5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-sm text-gray-400">Cover template for <a class="text-white decoration-2 underline underline-offset-2 font-medium hover:text-gray-200 hover:decoration-gray-400" href="../index.html">Preline</a></p>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
</div>
</body>"
</html>
Boxed Layout
<body class="bg-slate-50 dark:bg-slate-900">
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full text-sm">
<nav class="relative max-w-7xl w-full mx-auto bg-white border-b border-gray-200 py-3 px-4 sm:py-0 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 xl:border-x dark:bg-gray-800 dark:border-gray-700" aria-label="Global">
<div class="flex items-center justify-between">
<a class="flex-none text-xl font-semibold dark:text-white" href="#" aria-label="Brand">Brand</a>
<div class="sm:hidden">
<button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
<svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
<svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
</div>
</div>
<div id="navbar-collapse-with-animation" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
<div class="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:pl-7">
<a class="font-medium text-blue-600 sm:py-6 dark:text-blue-500" href="#" aria-current="page">Landing</a>
<a class="font-medium text-gray-500 hover:text-gray-400 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
<a class="font-medium text-gray-500 hover:text-gray-400 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
<a class="font-medium text-gray-500 hover:text-gray-400 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
<div class="hs-dropdown [--strategy:static] sm:[--strategy:absolute] [--adaptive:none] sm:[--trigger:hover]">
<button type="button" class="flex items-center w-full text-gray-500 hover:text-gray-400 font-medium dark:text-gray-400 dark:hover:text-gray-500 ">
Dropdown
<svg class="ml-2 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 hidden z-10 bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute top-full sm:border before:-top-5 before:left-0 before:w-full before:h-5">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
About
</a>
<div class="hs-dropdown relative [--strategy:static] sm:[--strategy:absolute] [--adaptive:none] sm:[--trigger:hover]">
<button type="button" class="w-full flex justify-between w-full items-center text-sm text-gray-800 rounded-md py-2 px-3 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
Sub Menu
<svg class="sm:-rotate-90 ml-2 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 hidden z-10 sm:mt-2 bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute sm:border before:-right-5 before:top-0 before:h-full before:w-5 top-0 right-full !mx-[10px]">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
About
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Downloads
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Team Account
</a>
</div>
</div>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Downloads
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Team Account
</a>
</div>
</div>
<a class="flex items-center gap-x-2 font-medium text-gray-500 hover:text-blue-600 sm:border-l sm:border-gray-300 sm:my-6 sm:pl-6 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>
Log in
</a>
</div>
</div>
</nav>
</header>
<main id="content" role="main">
<div class="max-w-7xl mx-auto min-h-screen bg-white border-x-gray-200 py-10 px-4 sm:px-6 lg:px-8 xl:border-x dark:bg-gray-800 dark:border-x-gray-700">
<!-- Page Heading -->
<header class="max-w-3xl">
<p class="mb-2 text-sm font-semibold text-blue-600">Starter Pages & Examples</p>
<h1 class="block text-2xl font-bold text-gray-800 sm:text-3xl dark:text-white">Boxed Layout using Tailwind CSS</h1>
<p class="mt-2 text-lg text-gray-800 dark:text-gray-400">This is a boxed layout example using Tailwind CSS.</p>
<div class="mt-5 flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
<a class="w-full sm:w-auto inline-flex justify-center items-center gap-x-3 text-center bg-blue-600 hover:bg-blue-700 border border-transparent text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 dark:focus:ring-offset-gray-800" href="https://github.com/htmlstreamofficial/preline/tree/main/examples/html" target="_blank">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
Get the source code
</a>
<a class="w-full sm:w-auto inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold text-blue-500 hover:text-blue-700 focus:outline-none focus:ring-2 ring-offset-white focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm py-3 px-4 dark:ring-offset-slate-900" href="../examples.html">
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Back to examples
</a>
</div>
</header>
<!-- End Page Heading -->
</div>
</main>
</body>"
Download Preline UI
Our code is available for you to download, inspect, and modify: