124 lines
9.4 KiB
HTML
124 lines
9.4 KiB
HTML
<div class="not-prose">
|
|
<h2 class="pt-0 mb-2 text-3xl font-bold tracking-tight select-none not-prose custom-font">Introduction</h2>
|
|
</div>
|
|
<p class="text-gray-500">The team over here at <a href="https://devdojo.com" class="relative text-indigo-600 group"><span>DevDojo</span><span class="absolute bottom-0 left-0 w-0 h-px duration-300 ease-out bg-indigo-500 group-hover:w-full"></span></a> are huge fans of Alpine and Tailwind 🤩 We love it so much that we are fine-tuning and open-sourcing our library of UI elements that we've been crafting over the years.</p>
|
|
|
|
<hr>
|
|
|
|
<h3>Why Tailwind and Alpine?</h3>
|
|
<p class="text-gray-500">When used together, Alpine and Tailwind complement each other and allow developers to build re-usable and functional UI elements with minimal effort. By using <strong>Alpine directives</strong> for functionality and <strong>Tailwind utility classes</strong> for design, we can create beautiful and functional interfaces represented by using <strong>only HTML</strong>.</p>
|
|
|
|
<h3>An Example</h3>
|
|
|
|
<p class="text-gray-500">Here is an example of a simple dropdown with minimal code 👇</p>
|
|
|
|
|
|
<div x-data="{ preview: true }" class="relative z-30 w-full mb-5 rounded-md">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div
|
|
x-data="{
|
|
repositionTabMarker(el){
|
|
this.$refs.marker.style.width=el.offsetWidth + 'px';
|
|
this.$refs.marker.style.height=el.offsetHeight + 'px';
|
|
this.$refs.marker.style.left=el.offsetLeft + 'px';
|
|
}
|
|
}"
|
|
x-init="repositionTabMarker($el.firstElementChild);" class="relative inline-grid items-center justify-center w-auto h-10 grid-cols-2 p-1 text-gray-500 bg-gray-100 rounded-lg select-none">
|
|
<button type="button" @click="repositionTabMarker($el); preview=true;" class="relative z-20 inline-flex items-center justify-center h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap ring-offset-background">Preview</button>
|
|
<button type="button" @click="repositionTabMarker($el); preview=false" class="relative z-20 inline-flex items-center justify-center h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap ring-offset-background">Code</button>
|
|
<div x-ref="marker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak>
|
|
<div class="w-full h-full bg-white rounded-md shadow-sm"></div>
|
|
</div>
|
|
</div>
|
|
<div x-data="{
|
|
copyText: `<div x-data="{ open: false }" @click.outside="open=false" class="relative text-sm">
|
|
<button @click="open=!open" class="bg-white rounded-md shadow-sm cursor-pointer">
|
|
<span class="block px-4 py-2">Dropdown</span>
|
|
</button>
|
|
<ul x-show="open" class="absolute origin-top-left top-0 w-32 p-4 mt-10 bg-white rounded-md shadow-sm" x-transition x-cloak>
|
|
<li>Menu Item 1</li>
|
|
<li>Menu Item 2</li>
|
|
</ul>
|
|
</div>`,
|
|
copyNotification: false,
|
|
copyToClipboard() {
|
|
navigator.clipboard.writeText(this.copyText);
|
|
this.copyNotification = true;
|
|
let that = this;
|
|
setTimeout(function(){
|
|
that.copyNotification = false;
|
|
}, 3000);
|
|
}
|
|
}" class="relative flex items-center space-x-2">
|
|
<div
|
|
x-show="copyNotification"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-x-2"
|
|
x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100 translate-x-0"
|
|
x-transition:leave-end="opacity-0 translate-x-2"
|
|
class="absolute left-0" x-cloak>
|
|
<div class="px-3 h-7 -ml-0.5 items-center flex text-xs bg-green-500 border-r border-green-500 -translate-x-full text-white rounded">
|
|
<span>Copied!</span>
|
|
<div class="absolute right-0 inline-block h-full -mt-px overflow-hidden translate-x-3 -translate-y-2 top-1/2">
|
|
<!-- ← triangle container -->
|
|
<!-- triangle ↓ -->
|
|
<div class="w-3 h-3 origin-top-left transform rotate-45 bg-green-500 border border-transparent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyToClipboard();" class="flex items-center justify-center h-8 text-xs rounded-lg cursor-pointer w-9 hover:bg-gray-50 active:bg-gray-100 text-neutral-400 hover:text-neutral-700 group">
|
|
|
|
<svg class="w-4 h-4 stroke-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<div x-show="preview" class="relative p-10 border rounded-md border-neutral-200 bg-gray-50">
|
|
<div class="flex items-center justify-center w-full max-w-md mx-auto not-prose">
|
|
|
|
<div x-data="{ open: false }" @click.outside="open=false" class="relative text-sm">
|
|
<button @click="open=!open" class="bg-white rounded-md shadow-sm cursor-pointer">
|
|
<span class="block px-4 py-2">Dropdown</span>
|
|
</button>
|
|
<ul x-show="open" class="absolute top-0 w-32 p-4 mt-10 origin-top-left bg-white rounded-md shadow-sm" x-transition x-cloak>
|
|
<li>Menu Item 1</li>
|
|
<li>Menu Item 2</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div x-show="!preview" :class="{ 'opacity-0 z-10' : preview, 'z-30': !preview }" class="relative not-prose cursor-text " x-cloak>
|
|
<pre class="block w-full overflow-scroll text-sm border rounded-md hljs html border-neutral-200"><code class="hljs html"><div x-data="{ open: false }" @click.outside="open=false" class="relative text-sm">
|
|
<button @click="open=!open" class="bg-white rounded-md shadow-sm cursor-pointer">
|
|
<span class="block px-4 py-2">Dropdown</span>
|
|
</button>
|
|
<ul x-show="open" class="absolute origin-top-left top-0 w-32 p-4 mt-10 bg-white rounded-md shadow-sm" x-transition x-cloak>
|
|
<li>Menu Item 1</li>
|
|
<li>Menu Item 2</li>
|
|
</ul>
|
|
</div></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 bg-background text-foreground">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>
|
|
<h5 class="mb-1 font-medium leading-none tracking-tight">Copy the Code. That's all you need!</h5>
|
|
<div class="text-sm [&_p]:leading-relaxed">Simply add the <a href="https://alpinejs.dev" target="_blank" class="font-normal">Alpine</a> & <a href="https://tailwindcss.com" target="_blank" class="font-normal">Tailwind</a> library to your page, paste in the element, and boom 🔮</div>
|
|
</div>
|
|
|
|
<h3>Inspiration</h3>
|
|
|
|
<p class="text-gray-500">As we design and develop websites, it is essential to recognize the contributions of those who came before us. We stand on the shoulders of giants, learning from their success, and using their knowledge to improve our work. With that said, we have taken inspiration from these handful of Open Source projects below. Be sure to check them out.</p>
|
|
|
|
<ol>
|
|
<li><a href="https://tailwindcss.com" target="_blank" class="font-medium text-blue-600 underline">Tailwind CSS</a></li>
|
|
<li><a href="https://alpinejs.dev" target="_blank" class="font-medium text-blue-600 underline">Alpine JS</a></li>
|
|
<li><a href="https://www.radix-ui.com/" target="_blank" class="font-medium text-blue-600 underline">Radix UI</a></li>
|
|
<li><a href="https://ui.shadcn.com/" target="_blank" class="font-medium text-blue-600 underline">ShadCN UI</a></li>
|
|
<li><a href="https://getuikit.com/" target="_blank" class="font-medium text-blue-600 underline">Get UIKit</a></li>
|
|
<li><a href="https://sonner.emilkowal.ski/" target="_blank" class="font-medium text-blue-600 underline">Sonner</a></li>
|
|
</ol> |