A Pen by Stefan Mos on CodePen.
neisdev
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
| <link href="https://unpkg.com/[email protected] /css/boxicons.min.css" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| // Primary | |
| "indigo-dye": { |
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
| <form action=""> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="name"> | |
| Name | |
| </label> | |
| <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Text input"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state"> | |
| Subject |
neisdev
/ index.html
Created
April 18, 2023 21:53
Job Board | Post Job Page | Tailwind CSS | Simple MDE
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
| <!-- | |
| This is my attempt to recreate the Job Board Application that was initially developed by Andy Leverenz from Web-Crunch. | |
| https://www.youtube.com/watch?v=tGUMArAW5OE&list=PL01nNIgQ4uxNkDZNMON-TrzDVNIk3cOz4&index=39&t=0s | |
| --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> |
neisdev
/ alpine-js-focus-in-action.markdown
Created
April 16, 2023 23:18
Alpine.js focus() in action
A Pen by Isaac Tait on CodePen.
neisdev
/ index.html
Created
April 16, 2023 12:45
Model based form validation with Alpine.js and Tailwindcss
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> | |
| <div class="bg-gray-200 h-screen"> | |
| <div class="container mx-auto w-full h-full"> | |
| <div class="max-w-screen-sm mx-auto w-full h-full flex flex-col items-center justify-center"> | |
| <div class="bg-white p-5 shadow-md w-full"> | |
| <h1 class="text-gray-900 mb-8">Form Validation</h1> | |
| <form | |
| method="POST" | |
| x-data="validateForm()" | |
| x-init=" |
A Pen by Bhavesh Prajapati 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
| <div class="container-fluid"> | |
| <div id="container"></div> | |
| </div> |
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="h-screen w-screen bg-indigo-400 overflow-hidden absolute flex items-center"> | |
| <div class="w-screen h-64 absolute top-0 opacity-50 left-0 -my-40 -mx-64 bg-indigo-300 rounded-full"></div> | |
| <div class="w-64 h-64 -mx-32 bg-indigo-300 opacity-50 rounded-full"></div> | |
| <div class="w-64 h-64 ml-auto relative opacity-50 -mr-32 bg-indigo-300 rounded-full"></div> | |
| <div class="w-screen h-64 absolute opacity-50 bottom-0 right-0 -my-40 -mx-64 bg-indigo-300 rounded-full"></div> | |
| </div> | |
| <div class="container mx-auto h-screen py-16 px-8 relative"> | |
| <div class="flex w-full rounded-lg h-full lg:overflow-hidden overflow-auto lg:flex-row flex-col shadow-2xl"> | |
| <div class="lg:w-1/2 bg-white text-gray-800 flex flex-col"> |
neisdev
/ dracula-theme-for-prism-js-syntax-highlighting-includes-quick-implementation-instructions.markdown
Created
April 11, 2023 09:53
Dracula Theme For Prism.js Syntax Highlighting (Includes Quick-Implementation Instructions)
Dracula Theme For Prism.js Syntax Highlighting.
Includes Implementation Instructions and some additional (and unnecessary) presentational stylization/formatting.
Praise be to glory that is click-to-copy.
A Pen by Matt Daniel Brown on CodePen.