Google Keep navigation bar clone built with tailwindcss
A Pen by Mesut Koca on CodePen.
| /* | |
| * Copyright 2017 Mohsen Mesgarpour | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software |
| <body class="bg-grey-light font-sans"> | |
| <div class="bg-white"> | |
| <div class="container mx-auto flex flex-col lg:flex-row items-center py-4"> | |
| <nav class="w-full lg:w-2/5"> | |
| <a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-home fa-lg"></i> Home</a> | |
| <a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-bolt fa-lg"></i> Moments</a> | |
| <a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-bell fa-lg"></i> Notifications</a> | |
| <a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid bord |
| <div class="navbar-container"> | |
| <div class="center-content-1040px"> | |
| <nav class="navbar navbar-expand navbar-dark"> | |
| <a class="navbar-brand" href="/">U</a> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item"><a class="nav-link" href='https://www.medium.com'>MEDIUM</a></li> | |
| <li class="nav-item"><a class="nav-link" href='https://www.github.com'>GITHUB</a></li> | |
| <li class="nav-item"><a class="nav-link" href='#'>ABOUT</a></li> |
| <h1 class="display-1" style="text-align: center; color: #039be5">Material Design Typography</h1> | |
| <div style="display: table; margin: 0 auto"> | |
| <div style="display: table-cell; min-width: 170px; padding-right: 2.4rem"> | |
| <h3 class="subhead-2" style="">Use this classes:</h3> | |
| <!-- | |
| <div class="display-4">.display-4</div> | |
| <div class="display-3">.display-3</div> | |
| <div class="display-2">.display-2</div> | |
| --> | |
| <div class="display-1">.display-1</div> |
This is just a concept for my website (www.zhongapp.com), showing how to show messages and statuses from the users.
| <div class="grid-container"> | |
| <div class="menu-icon"> | |
| <i class="fas fa-bars header__menu"></i> | |
| </div> | |
| <header class="header"> | |
| <div class="header__search">Search...</div> | |
| <div class="header__avatar">Your face</div> | |
| </header> |
To illustrate (and celebrate) the approach between editorial design and web design, we have set out to design with CSS Grid some pages of number 3 of the 99U Quarterly Magazine, a very interesting publication for the creative community.
Read the full article here
A Pen by Ricardo Prieto on CodePen.
| <aside> | |
| <h1 class='title'>Gmail</h1> | |
| <button class='button-silver mail-compose'>Compose</button> | |
| <div class='tabs'> | |
| <input type='radio' name='tabs' id='chat-toggle' checked> | |
| <label for='chat-toggle'> | |
| <button class='button-large button-grey'><i class="fa fa-comment"></i></button> | |
| </label> | |
| <input type='radio' name='tabs' id='gadgets-toggle'> |