Design by Paul van Oijen on Dribbble: https://dribbble.com/shots/3838821-Modals/attachments/869282
A Pen by Håvard Brynjulfsen 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
| <body> | |
| <div class="content"> | |
| <!-- To Top Button --> | |
| <button onclick="topFunction()" id="to-top" title="Go to top">↑</button> | |
| <!-- Navigation Bar --> | |
| <div class="topnav" id="myTopnav"> | |
| <a href="https://www.netflix.com" class="symbol-div"><img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/113/037/original/Netflix_Logo_RGB.png?1706649012" id="netflix-symbol" alt="Netflix Symbol"> | |
| </a> |
neisdev
/ entity-relationship-diagram-erd.markdown
Created
October 14, 2025 05:14
Entity Relationship Diagram ERD
Sometimes you need the simplicity, this pen draw an ERD with only a few parameters, clean and easy to use, was developed prompting ChatGPT
A Pen by Ronald Avendaño on CodePen.
neisdev
/ index.html
Created
March 8, 2025 08:12
Input "radio" size chart selector w/ Alpine.js & 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
| <!-- Tailwind CSS :: styles --> | |
| <style type="text/tailwindcss"> | |
| @layer base {} | |
| @layer components {} | |
| @layer utilities { | |
| .content-auto { | |
| content-visibility: auto; | |
| } | |
| } | |
| </style> |
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="p-6 m-6 lg:p-12 lg:m-12 bg-gray-50 rounded-lg"> | |
| <div class="flex flex-col lg:flex-row" x-data="{ fields: [''] }"> | |
| <div class="lg:w-1/2 lg:mr-6 lg:mb-0 mb-6"> | |
| <template x-for="(field, index) in fields" :key="index"> | |
| <div class="flex mb-2"> | |
| <input type="text" name="data[]" x-model="fields[index]" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="write text here"> | |
| <button x-show="fields.length > 1" class="ml-2 bg-red-500 hover:bg-red-700 text-white font-bold px-4 rounded focus:outline-none focus:shadow-outline" @click="fields.splice(index, 1)">-</button> | |
| </div> | |
| </template> |
neisdev
/ data-table-with-tailwindcss-alpinejs.markdown
Created
November 11, 2024 15:01
Data Table with TailwindCSS & AlpineJS
Alpine Js & TailwindCSS Datatable..
Modified version of @mithicher Pen
https://codepen.io/mithicher/pen/OJyRjvb
A Pen by salmi iliass on CodePen.
Basic Checkout Page via Bootstrap
A Pen by pelinoloji 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="relative h-screen flex overflow-y-auto lg:overflow-hidden bg-gradient-to-r from-white via-blue-50 to-gray-50"> | |
| <!-- Not in use: Off-canvas menu for mobile, show/hide based on off-canvas menu state. --> | |
| <div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true" style="display: none;"> | |
| <!-- | |
| Off-canvas menu overlay, show/hide based on off-canvas menu state. | |
| Entering: "transition-opacity ease-linear duration-300" | |
| From: "opacity-0" | |
| To: "opacity-100" |
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="relative h-screen flex overflow-y-auto lg:overflow-hidden bg-gradient-to-r from-white via-blue-50 to-gray-50"> | |
| <!-- Not in use: Off-canvas menu for mobile, show/hide based on off-canvas menu state. --> | |
| <div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true" style="display: none;"> | |
| <!-- | |
| Off-canvas menu overlay, show/hide based on off-canvas menu state. | |
| Entering: "transition-opacity ease-linear duration-300" | |
| From: "opacity-0" | |
| To: "opacity-100" |
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="relative h-screen flex overflow-y-auto lg:overflow-hidden bg-gradient-to-r from-white via-blue-50 to-gray-50"> | |
| <!-- Not in use: Off-canvas menu for mobile, show/hide based on off-canvas menu state. --> | |
| <div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true" style="display: none;"> | |
| <!-- | |
| Off-canvas menu overlay, show/hide based on off-canvas menu state. | |
| Entering: "transition-opacity ease-linear duration-300" | |
| From: "opacity-0" | |
| To: "opacity-100" |
NewerOlder