- Getting started | ⚡️FlashGrid
A Pen by Matt Daniel Brown on CodePen.
Matthew Daniel Brown matt-daniel-brown
matt-daniel-brown
/ 1-getting-started-flashgrid.markdown
Created
December 10, 2020 15:55
1. Getting started | ⚡️FlashGrid
matt-daniel-brown
/ cdn-floating-labels.markdown
Created
December 10, 2020 15:55
CDN Floating Labels
💡 Learn how to create floating labels in CSS using the :placeholder-shown selector.
A Pen by Matt Daniel Brown on CodePen.
A Pen by Matt Daniel Brown on CodePen.
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
| <body class="flex items-center justify-center w-screen min-h-screen p-10"> | |
| <!-- Resice the preview panel to check the responsiveness --> | |
| <!-- Component Start --> | |
| <div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-2 max-w-6xl"> | |
| <!-- Tile 1 --> | |
| <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2"> | |
| <div class="h-40 bg-gray-400 rounded-lg"></div> | |
| <div class="flex flex-col items-start mt-4"> | |
| <h4 class="text-xl font-semibold">Heading</h4> |
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
| <svg class="btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="75" height="75" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"> | |
| <mask id="m"> | |
| <circle class="masker" cx="7.5" cy="7.5" r="8.5" fill="#fff" /> | |
| </mask> | |
| <g mask="url(#m)"> | |
| <path class="sun" d="M7.5 1.5v-1m0 13.99v-.998m6-5.997h1m-13 0h-1m2-4.996l-1-1m12 0l-1 1m-10 9.993l-1 1m12 0l-1-1m-2-4.997a2.999 2.999 0 01-3 2.998 2.999 2.999 0 113-2.998z" /> | |
| </g> | |
| <path class="moon" d="M1.66 11.362A6.5 6.5 0 007.693.502a7 7 0 11-6.031 10.86z" /> | |
| </svg> |
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
| <!-- ionic embeds (see https://ionicframework.com/docs/intro/cdn#ionic-framework-cdn) --> | |
| <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script> --> | |
| <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/> |
matt-daniel-brown
/ css-gradients-animated-gradient.markdown
Created
December 2, 2020 19:32
CSS Gradients: Animated Gradient
A Pen by Matt Daniel Brown on CodePen.
matt-daniel-brown
/ index.html
Created
December 2, 2020 19:28
Lo-fi Marketplace / eCommerce Page - with Tailwind CSS
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
| <body class="flex flex-col w-screen min-h-screen p-10 bg-gray-100 text-gray-800"> | |
| <!-- Component Start --> | |
| <h1 class="text-3xl">Product Category Page Title</h1> | |
| <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between mt-6"> | |
| <span class="text-sm font-semibold">1-16 of 148 Products</span> | |
| <button class="relative text-sm focus:outline-none group mt-4 sm:mt-0"> | |
| <div class="flex items-center justify-between w-40 h-10 px-3 border-2 border-gray-300 rounded hover:bg-gray-300"> | |
| <span class="font-medium"> | |
| Popular |
A Pen by Matt Daniel Brown on CodePen.
matt-daniel-brown
/ blurred-backgrounds.markdown
Created
September 8, 2020 22:20
Blurred Backgrounds