Skip to content

Instantly share code, notes, and snippets.

@neisdev
neisdev / index.html
Created February 20, 2023 13:01
React Hooks: Employee CRUD using React Context and Tailwind CSS
<div id="app"></div>
@neisdev
neisdev / figma-dark-light-mode-switch.markdown
Created February 17, 2023 23:43
Figma Dark/Light Mode Switch
@neisdev
neisdev / css-grid-layout-overflow-body.markdown
Created January 20, 2023 12:42
css grid layout overflow body
@neisdev
neisdev / drag-and-drop-example-using-alpinejs-and-tailwindcss.markdown
Created January 19, 2023 12:44
Drag and Drop example using AlpineJS and TailwindCSS
@neisdev
neisdev / index.html
Last active January 3, 2023 07:56
Sorting/Drag&Drop Demo Using AlpineJS + TailwindCSS
<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
@neisdev
neisdev / admin-dashboard-tailwind-alpinejs.markdown
Created December 20, 2022 15:09
Admin Dashboard (Tailwind & Alpinejs )

Admin Dashboard (Tailwind & Alpinejs )

Admin Dashboard using TailwindCss and AlpineJs. Sticky sidebar Sticky top navbar

A Pen by Fares Arnous on CodePen.

License.

@neisdev
neisdev / alpine-js-double-click-to-edit.markdown
Created December 19, 2022 10:31
Alpine.js Double Click to Edit
@neisdev
neisdev / index.html
Created December 13, 2022 13:43
Spa Landing Page
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom fixed-top">
<!-- Collapse toggler button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<div class="hamburger-containter">
<span class="icon-bar bar1"></span>
<span class="icon-bar bar2"></span>
<span class="icon-bar bar3"></span>
</div>
@neisdev
neisdev / index.html
Created November 25, 2022 13:35
OOaPoB
<div id="map-canvas"></div>
<ul class="overlay">
<h3>49 incidentes em Porto Alegre</h3>
</ul>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
@neisdev
neisdev / index.html
Created November 16, 2022 14:22
Sorting/Drag&Drop Demo Using AlpineJS + TailwindCSS
<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