Alpine Js & TailwindCSS Datatable..
Modified version of @mithicher Pen
https://codepen.io/mithicher/pen/OJyRjvb
A Pen by salmi iliass on CodePen.
neisdev
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
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" |
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
| <!doctype html> | |
| <html class="" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <title>Kanban</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain--> | |
| <!--main.css for custom 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="relative h-screen flex overflow-hidden bg-gradient-to-r from-white via-blue-50 to-gray-50"> | |
| <!-- Narrow sidebar --> | |
| <aside class="flex w-40 h-screen bg-gradient-to-bl from-gray-700 via-gray-700 to-gray-800 md:flex-shrink-0 flex-col"> | |
| <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto"> | |
| <header class="flex items-center flex-shrink-0 border-bottom border-solid border-gray-100"><img class="px-3 h-6 w-auto " src="https://app.rollbar.com//images/common/rollbar-icon-white.svg" alt="" aria-hidden="true"><span class="text-sm font-bold tracking-wider text-white">Rollbar</span></header> | |
| <nav class="mt-5 mx-1 flex-1 space-y-1"><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm gap-x-2.5 font-normal rounded-md" href="https://rollbar.com/Rollbar/"><svg class="h-6 w-6 group-hover:text-gray-100 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path |
neisdev
/ bitbucket-with-tailwindcss.markdown
Created
August 8, 2024 03:48
Bitbuckët with tailwindcss
A Pen by Eduardo Guzmán H. on CodePen.
NewerOlder