Chi Nguyen cnguyen-de
💭
cnguyen-de
/ layout.html
Created
November 29, 2021 16:13
Basic responsive layout with header, main, footer whereas main has 3 columns and responsive main content
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="flex flex-col h-screen w-screen"> | |
| <header class="p-4 bg-blue-100 flex flex-row space-x-4"> | |
| <span class="w-20 text-center">logo</span> | |
| <span>link 1 </span> | |
| <span>link 2 </span> | |
| </header> | |
| <div class="flex-grow flex flex-row"> | |
| <aside class="w-64 bg-blue-200 hidden lg:flex items-center justify-center">sidebar left</aside> | |
| <main class="flex-grow bg-blue-300"> | |
| <div class="grid grid-flow-row sm:grid-cols-4 gap-4 p-8"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="flex flex-row"> | |
| <div class="flex flex-col"> | |
| <div class="w-96 relative p-8 shadow-md rounded-md m-8"> | |
| <div class="header flex flex-row items-center"> | |
| <span class="uppercase tracking-wider text-gray-600">shipping address</span> | |
| <span class="flex-grow"></span> | |
| <button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg> | |
| </button> | |
| </div> |