Skip to content

Instantly share code, notes, and snippets.

Last active July 22, 2021 10:53
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save matiasfha/a52a4b9ccb650ed7eb8f046c118e9618 to your computer and use it in GitHub Desktop.
import '../app.postcss';
<header class="w-full h-32 py-8 px-4 border-b border-solid border-gray-300">
<div class="mx-auto max-w-6xl">
<h1 class="h-14 font-bold text-3xl text-left">Your brand</h1>
<nav class="w-full sticky">
<ul class="list-none h-9 flex flex-row items-center justify-items-start">
<li class="pr-4"><a href="/">Home</a></li>
<li class="px-4">Blog</li>
<li class="px-4">About</li>
<main class="py-2"><slot /></main>
<footer class="h-80">
<section class="h-72 bg-gray-100">
<div class="grid grid-cols-2 gap-12 mx-auto max-w-6xl pt-24">
<div class="flex flex-col items-start justify-between">
<h2 class="text-xl text-gray-900 font-bold">Subscribe to the newsletter</h2>
<p class="text-base text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis aspernatur ut at
quae omnis pariatur obcaecati possimus nisi ea iste!
<div class="flex items-center justify-around">
placeholder="Enter your email"
class="h-12 px-5 rounded-3xl shadow-md text-base text-gray-800 w-96"
class="px-2 flex flex-row justify-around items-center rounded-3xl bg-gray-900 text-white h-12 w-24 hover:bg-gray-700 hover: animate-pulse"
class="h-6 w-6"
viewBox="0 0 24 24"
d="M13 5l7 7-7 7M5 5l7 7-7 7"
<section class="text-center py-2 text-sm">
Copyright ©2021 All rights reserved | This template is made with by Me ❤️
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment