A Pen by Raymond Camden on CodePen.
neisdev
neisdev
/ index.html
Created
June 21, 2024 15:41
Sorting/Drag&Drop Demo Using AlpineJS + TailwindCSS
This file contains 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="min-h-screen justify-center flex p-16 bg-blue-200"> | |
| <div> | |
| <!-- This is a revised version. See the original clunky version here: https://codepen.io/KevinBatdorf/pen/ff805cf637420bcbb2caa9d199527247?editors=1010 --> | |
| <p class="mb-10 text-center">Drag & drop or press the menu icon button <br>(or use your tab key)</p> | |
| <div class="pt-6 pb-4 bg-indigo-500 rounded-lg shadow-xl max-w-sm"> | |
| <h1 id="agenda-title" class="text-white font-extrabold text-lg p-6 pt-0">What's the agenda for today?</h1> | |
| <ul |
A Pen by andreas jv on CodePen.
This file contains 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
| <html class="light-style layout-menu-fixed" data-theme="theme-default" data-assets-path="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/" data-base-url="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo" data-framework="laravel" data-template="vertical-menu-laravel-template-free"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> | |
| <title>Toasts - UI elements | Sneat - HTML Laravel Free Admin Template </title> | |
| <meta name="description" content="Most Powerful & Comprehensive Bootstrap 5 HTML Admin Dashboard Template built for developers!"> | |
| <meta name="keywords" content="dashboard, bootstrap 5 dashboard, bootstrap 5 design, bootstrap 5, bootstrap 5 free, free admin template"> | |
| <!-- laravel CRUD token --> |
A Pen by Amadeo Mancuso on CodePen.
This file contains 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 id="myeditor" class="editor"></div> | |
| <div id="output"></div> |
This file contains 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="antialiased sans-serif bg-gray-300"> | |
| <!-- Alert Box --> | |
| <div class="fixed w-full z-50 flex inset-0 items-start justify-center pointer-events-none md:mt-5" x-data="{ | |
| message: '', | |
| showFlashMessage(event) { | |
| this.message = event.detail.message; | |
| setTimeout(() => this.message = '', 3000) | |
| } | |
| }"> | |
| <template x-on:flash.window="showFlashMessage(event)"></template> |
This file contains 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 example requires Tailwind CSS v2.0+ --> | |
| <div class="min-h-screen bg-white"> | |
| <nav class="bg-white border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow"> | |
| <img class="hidden lg:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg" alt="Workflow"> | |
| </div> |
NewerOlder