OMERLINKS Calendar

OMERLINKS
Calendar

This tailwind example is contributed by Omer fils ELENGA, on 04-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Omer fils ELENGA

Tailwind v3.4 31

Fork Fullscreen

<aside class="w-full md:w-80 bg-white border-b md:border-b-0 md:border-r border-slate-200/80 p-6 flex flex-col justify-between shrink-0">
            <div>
                
                <div class="flex items-center justify-between mb-8">
                    <div class="flex items-center space-x-3">
                        <div class="w-9 h-9 rounded-xl bg-indigo-600 text-white flex items-center justify-center font-bold shadow-md shadow-indigo-200">
                            <i class="fa-solid fa-calendar-day text-sm"></i>
                        </div>
                        <div>
                            <h1 class="font-semibold text-slate-900 tracking-tight text-base"> OMERLINKS</h1>
                            <p class="text-xs text-slate-400">Calendar</p>
                        </div>
                    </div>
                    <button @click="openAddModal(todayStr)" class="md:hidden bg-indigo-600 text-white w-8 h-8 rounded-lg flex items-center justify-center hover:bg-indigo-700 transition">
                        <i class="fa-solid fa-plus text-sm"></i>
                    </button>
                </div>

<button @click="openAddModal(selectedDate || todayStr)" class="hidden md:flex w-full items-center justify-center space-x-2 bg-slate-900 hover:bg-indigo-600 text-white font-medium py-3 px-4 rounded-xl shadow-sm hover:shadow-indigo-100 transition-all duration-200 mb-8 group">
                    <i class="fa-solid fa-plus text-xs group-hover:rotate-90 transition-transform duration-300"></i>
                    <span class="text-sm">Nouvel événement</span>
                </button>

<div class="mb-6">
                    <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-3">Catégories</span>
                    <div class="space-y-1.5">
                        <template x-for="cat in categories" :key="cat.name">
                            <button @click="toggleCategory(cat.name)" 
                                    class="w-full flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-colors"
                                    :class="selectedCategories.includes(cat.name) ? 'bg-slate-100 text-slate-900' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-700'">
                                <div class="flex items-center space-x-2.5">
                                    <span class="w-2.5 h-2.5 rounded-full" :class="cat.colorClass"></span>
                                    <span x-text="cat.label"></span>
                                </div>
                                <span class="text-[10px] px-2 py-0.5 rounded-full bg-slate-200/60 text-slate-600" x-text="countEventsByCategory(cat.name)"></span>
                            </button>
                        </template>
                    </div>
                </div>

<div>
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">
                            Événements (<span x-text="formatReadableDate(selectedDate)"></span>)
                        </span>
                        <span class="text-xs text-indigo-600 font-medium" x-text="selectedDateEvents.length + ' prêt(s)'"></span>
                    </div>

<div class="space-y-2 max-h-60 overflow-y-auto pr-1">
                        <template x-if="selectedDateEvents.length === 0">
                            <div class="p-4 text-center border border-dashed border-slate-200 rounded-xl">
                                <p class="text-xs text-slate-400">Aucun événement prévu pour cette date.</p>
                            </div>
                        </template>

<div class="pt-6 border-t border-slate-100 flex items-center space-x-3 mt-6">
                <div class="w-8 h-8 rounded-full bg-slate-200 border border-slate-300 flex items-center justify-center font-bold text-xs text-slate-600">
                  E.O
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-xs font-medium text-slate-800 truncate">OMER FILS ELENGA</p>
                    <p class="text-[10px] text-slate-400 truncate">ELENGAOMERFILS@GMAIL.COM</p>
                </div>
            </div>
        </aside>

<main class="flex-1 flex flex-col min-w-0 bg-slate-50/50 p-4 md:p-8">
            
            
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
                <div class="flex items-center space-x-4">
                    <h2 class="text-2xl font-bold text-slate-900 tracking-tight" x-text="currentMonthYearFormatted"></h2>
                    <div class="flex items-center space-x-1 bg-white border border-slate-200/80 rounded-xl p-1 shadow-sm">
                        <button @click="prevMonth()" class="w-8 h-8 rounded-lg hover:bg-slate-100 flex items-center justify-center text-slate-600 transition">
                            <i class="fa-solid fa-chevron-left text-xs"></i>
                        </button>
                        <button @click="goToToday()" class="px-3 h-8 rounded-lg hover:bg-slate-100 text-xs font-semibold text-slate-700 transition">
                            Aujourd'hui
                        </button>
                        <button @click="nextMonth()" class="w-8 h-8 rounded-lg hover:bg-slate-100 flex items-center justify-center text-slate-600 transition">
                            <i class="fa-solid fa-chevron-right text-xs"></i>
                        </button>
                    </div>
                </div>

<div class="flex items-center space-x-2">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700 border border-indigo-200">
                        <i class="fa-solid fa-hand-pointer mr-1.5 text-[10px]"></i>
                        Glisser-déposer actif
                    </span>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-2 animate-pulse"></span>
                        Mode Épuré
                    </span>
                </div>
            </div>

<div class="grid grid-cols-7 gap-px bg-slate-200/60 rounded-t-2xl border border-slate-200/80 overflow-hidden text-center text-xs font-semibold text-slate-500 py-3 bg-white">
                <div>LUN</div>
                <div>MAR</div>
                <div>MER</div>
                <div>JEU</div>
                <div>VEN</div>
                <div>SAM</div>
                <div>DIM</div>
            </div>

<div class="grid grid-cols-7 gap-px bg-slate-200/80 border-x border-b border-slate-200/80 rounded-b-2xl overflow-hidden flex-1 min-h-[550px]">
                <template x-for="(day, index) in calendarDays" :key="index">
                    <div 
                        @click="selectDate(day.dateStr)" 
                        @dragover.prevent="dragOverDay = day.dateStr"
                        @dragleave="if (dragOverDay === day.dateStr) dragOverDay = null"
                        @drop.prevent="onDropOnDay(day.dateStr)"
                        class="bg-white min-h-[90px] p-2 flex flex-col justify-between transition-colors relative group cursor-pointer"
                        :class="{
                            'bg-slate-50/60 text-slate-400': !day.isCurrentMonth,
                            'ring-2 ring-indigo-600 ring-inset z-10 bg-indigo-50/20': day.dateStr === selectedDate && dragOverDay !== day.dateStr,
                            'ring-2 ring-indigo-500 ring-dashed bg-indigo-100/50 z-20': dragOverDay === day.dateStr,
                            'hover:bg-slate-50': day.isCurrentMonth && day.dateStr !== selectedDate && dragOverDay !== day.dateStr
                        }"
                    >
                        
                        <div class="flex items-center justify-between">
                            <span 
                                class="text-xs font-semibold w-6 h-6 rounded-full flex items-center justify-center transition-all"
                                :class="{
                                    'bg-indigo-600 text-white font-bold shadow-sm': day.isToday,
                                    'text-slate-900': day.isCurrentMonth && !day.isToday,
                                    'text-slate-400': !day.isCurrentMonth
                                }"
                                x-text="day.dayNumber"
                            ></span>

<button @click.stop="openAddModal(day.dateStr)" class="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-indigo-600 p-1 text-xs transition">
                                <i class="fa-solid fa-plus"></i>
                            </button>
                        </div>

<div class="mt-1 space-y-1 overflow-hidden flex-1">
                            <template x-for="event in getEventsForDay(day.dateStr).slice(0, 3)" :key="event.id">
                                <div 
                                    draggable="true"
                                    @dragstart.stop="onDragStart($event, event.id)"
                                    @dragend="onDragEnd()"
                                    @click.stop="openDetailModal(event)"
                                    class="text-[11px] px-2 py-1 rounded-md font-medium truncate flex items-center space-x-1.5 shadow-2xs hover:opacity-85 transition cursor-grab active:cursor-grabbing select-none"
                                    :class="[getCategoryBadgeStyle(event.category), draggedEventId === event.id ? 'opacity-40 scale-95' : '']"
                                >
                                    <span class="w-1.5 h-1.5 rounded-full shrink-0" :class="getCategoryColorClass(event.category)"></span>
                                    <span class="truncate" x-text="event.title"></span>
                                </div>
                            </template>

<template x-if="getEventsForDay(day.dateStr).length > 3">
                                <p class="text-[10px] font-semibold text-slate-400 pl-1">
                                    + <span x-text="getEventsForDay(day.dateStr).length - 3"></span> autre(s)
                                </p>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </main>
    </div>

<div x-show="isAddModalOpen" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            
            <div x-show="isAddModalOpen" 
                 x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                 @click="isAddModalOpen = false" 
                 class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity"></div>

<div x-show="isAddModalOpen" 
                 x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
                 class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-slate-100">
                
                <div class="p-6">
                    <div class="flex items-center justify-between pb-4 border-b border-slate-100">
                        <h3 class="text-lg font-bold text-slate-900">Nouvel Événement</h3>
                        <button @click="isAddModalOpen = false" class="text-slate-400 hover:text-slate-600 rounded-lg p-1">
                            <i class="fa-solid fa-xmark text-base"></i>
                        </button>
                    </div>

<form @submit.prevent="saveEvent()" class="mt-4 space-y-4">
                        
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Titre de l'événement</label>
                            <input type="text" x-model="newEvent.title" required placeholder="Ex: Réunion de projet Épuré"
                                class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-600 transition">
                        </div>

<div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Date</label>
                                <input type="date" x-model="newEvent.date" required
                                    class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-600 transition">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Heure / Plage</label>
                                <input type="text" x-model="newEvent.time" placeholder="10:00 - 11:30" required
                                    class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-600 transition">
                            </div>
                        </div>

<div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Catégorie</label>
                            <div class="grid grid-cols-2 gap-2">
                                <template x-for="cat in categories" :key="cat.name">
                                    <button type="button" @click="newEvent.category = cat.name"
                                        class="flex items-center space-x-2 px-3 py-2 rounded-xl text-xs border font-medium transition"
                                        :class="newEvent.category === cat.name ? 'border-indigo-600 bg-indigo-50/50 text-indigo-900 ring-1 ring-indigo-600' : 'border-slate-200 text-slate-600 hover:bg-slate-50'">
                                        <span class="w-2.5 h-2.5 rounded-full" :class="cat.colorClass"></span>
                                        <span x-text="cat.label"></span>
                                    </button>
                                </template>
                            </div>
                        </div>

<div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Notes / Description</label>
                            <textarea x-model="newEvent.description" rows="3" placeholder="Ajouter un ordre du jour ou des détails..."
                                class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-600 transition"></textarea>
                        </div>

<div class="pt-4 flex items-center justify-end space-x-3 border-t border-slate-100">
                            <button type="button" @click="isAddModalOpen = false"
                                class="px-4 py-2.5 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition">
                                Annuler
                            </button>
                            <button type="submit"
                                class="px-5 py-2.5 rounded-xl text-xs font-semibold bg-indigo-600 hover:bg-indigo-700 text-white shadow-md shadow-indigo-100 transition">
                                Enregistrer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<div x-show="isDetailModalOpen" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            
            <div x-show="isDetailModalOpen" 
                 x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                 @click="isDetailModalOpen = false" 
                 class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity"></div>

<div class="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between">
                            <button @click="deleteEvent(selectedEvent.id)" class="text-xs font-medium text-rose-600 hover:text-rose-700 flex items-center space-x-1.5">
                                <i class="fa-regular fa-trash-can"></i>
                                <span>Supprimer</span>
                            </button>

<button @click="isDetailModalOpen = false" class="px-4 py-2 bg-slate-900 text-white rounded-xl text-xs font-medium hover:bg-slate-800 transition">
                                Fermer
                            </button>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>

categories: [
                    { name: 'Work', label: 'Travail / Réunions', colorClass: 'bg-indigo-500', badgeStyle: 'bg-indigo-50 text-indigo-700 border border-indigo-100' },
                    { name: 'Personal', label: 'Personnel', colorClass: 'bg-emerald-500', badgeStyle: 'bg-emerald-50 text-emerald-700 border border-emerald-100' },
                    { name: 'Design', label: 'Projets / Design', colorClass: 'bg-purple-500', badgeStyle: 'bg-purple-50 text-purple-700 border border-purple-100' },
                    { name: 'Health', label: 'Santé & Sport', colorClass: 'bg-rose-500', badgeStyle: 'bg-rose-50 text-rose-700 border border-rose-100' }
                ],

newEvent: {
                    title: '',
                    date: '',
                    time: '10:00 - 11:00',
                    category: 'Work',
                    description: ''
                },

events: [],

initData() {
                    const today = new Date();
                    this.todayStr = this.formatDateStr(today);
                    this.selectedDate = this.todayStr;

// Génération de fausses données autour de la date actuelle
                    const offsetDate = (days) => {
                        const d = new Date();
                        d.setDate(d.getDate() + days);
                        return this.formatDateStr(d);
                    };

this.events = [
                        {
                            id: 1,
                            title: 'Revue de Sprint & Design',
                            date: this.todayStr,
                            time: '09:30 - 10:30',
                            category: 'Design',
                            description: 'Validation des maquettes du mode épuré avec l’équipe UI/UX.'
                        },
                        {
                            id: 2,
                            title: 'Déjeuner d’équipe',
                            date: this.todayStr,
                            time: '12:30 - 13:45',
                            category: 'Personal',
                            description: 'Pause déjeuner au bistro du centre-ville.'
                        },
                        {
                            id: 3,
                            title: 'Synchro Hebdomadaire',
                            date: offsetDate(1),
                            time: '11:00 - 12:00',
                            category: 'Work',
                            description: 'Point d’avancement sur la feuille de route Q4.'
                        },
                        {
                            id: 4,
                            title: 'Séance de Crossfit',
                            date: offsetDate(2),
                            time: '18:00 - 19:15',
                            category: 'Health',
                            description: 'Entraînement de cardio & renforcement.'
                        },
                        {
                            id: 5,
                            title: 'Workshop Système de Design',
                            date: offsetDate(-2),
                            time: '14:00 - 16:00',
                            category: 'Design',
                            description: 'Alignement des composants avec Tailwind CSS.'
                        }
                    ];
                },

// Calendar Navigation & Helpers
                get currentMonthYearFormatted() {
                    const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
                    return `${months[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`;
                },

get calendarDays() {
                    const year = this.currentDate.getFullYear();
                    const month = this.currentDate.getMonth();

// Premier jour du mois
                    const firstDayOfMonth = new Date(year, month, 1);
                    // Dernier jour du mois
                    const lastDayOfMonth = new Date(year, month + 1, 0);

// Offset pour commencer le lundi (0=Lun, 6=Dim)
                    let dayOfWeek = firstDayOfMonth.getDay() - 1;
                    if (dayOfWeek === -1) dayOfWeek = 6;

const days = [];

// Jours du mois précédent
                    const prevMonthLastDay = new Date(year, month, 0).getDate();
                    for (let i = dayOfWeek - 1; i >= 0; i--) {
                        const d = new Date(year, month - 1, prevMonthLastDay - i);
                        const dateStr = this.formatDateStr(d);
                        days.push({
                            dayNumber: d.getDate(),
                            dateStr: dateStr,
                            isCurrentMonth: false,
                            isToday: dateStr === this.todayStr
                        });
                    }

// Jours du mois courant
                    for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
                        const d = new Date(year, month, i);
                        const dateStr = this.formatDateStr(d);
                        days.push({
                            dayNumber: i,
                            dateStr: dateStr,
                            isCurrentMonth: true,
                            isToday: dateStr === this.todayStr
                        });
                    }

// Remplissage de la dernière semaine avec le mois suivant
                    const remainingCells = 42 - days.length; // 6 semaines x 7 jours
                    for (let i = 1; i <= remainingCells; i++) {
                        const d = new Date(year, month + 1, i);
                        const dateStr = this.formatDateStr(d);
                        days.push({
                            dayNumber: i,
                            dateStr: dateStr,
                            isCurrentMonth: false,
                            isToday: dateStr === this.todayStr
                        });
                    }

return days;
                },

prevMonth() {
                    this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
                },

nextMonth() {
                    this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
                },

goToToday() {
                    this.currentDate = new Date();
                    this.selectedDate = this.todayStr;
                },

selectDate(dateStr) {
                    this.selectedDate = dateStr;
                },

get selectedDateEvents() {
                    return this.events.filter(e => e.date === this.selectedDate && this.selectedCategories.includes(e.category));
                },

getEventsForDay(dateStr) {
                    return this.events.filter(e => e.date === dateStr && this.selectedCategories.includes(e.category));
                },

toggleCategory(catName) {
                    if (this.selectedCategories.includes(catName)) {
                        this.selectedCategories = this.selectedCategories.filter(c => c !== catName);
                    } else {
                        this.selectedCategories.push(catName);
                    }
                },

countEventsByCategory(catName) {
                    return this.events.filter(e => e.category === catName).length;
                },

// Modals Controls
                openAddModal(dateStr) {
                    this.newEvent = {
                        title: '',
                        date: dateStr || this.selectedDate || this.todayStr,
                        time: '10:00 - 11:00',
                        category: 'Work',
                        description: ''
                    };
                    this.isAddModalOpen = true;
                },

openDetailModal(event) {
                    this.selectedEvent = event;
                    this.isDetailModalOpen = true;
                },

saveEvent() {
                    if (!this.newEvent.title) return;

const createdEvent = {
                        id: Date.now(),
                        title: this.newEvent.title,
                        date: this.newEvent.date,
                        time: this.newEvent.time,
                        category: this.newEvent.category,
                        description: this.newEvent.description
                    };

this.events.push(createdEvent);
                    this.selectedDate = this.newEvent.date;
                    this.isAddModalOpen = false;
                },

deleteEvent(id) {
                    this.events = this.events.filter(e => e.id !== id);
                    this.isDetailModalOpen = false;
                },

// Drag and Drop Logic
                onDragStart(evt, eventId) {
                    this.draggedEventId = eventId;
                    if (evt.dataTransfer) {
                        evt.dataTransfer.effectAllowed = 'move';
                        evt.dataTransfer.setData('text/plain', eventId.toString());
                    }
                },

onDragEnd() {
                    this.draggedEventId = null;
                    this.dragOverDay = null;
                },

onDropOnDay(targetDateStr) {
                    if (!this.draggedEventId) return;
                    const evt = this.events.find(e => e.id === this.draggedEventId);
                    if (evt) {
                        evt.date = targetDateStr;
                        this.selectedDate = targetDateStr;
                    }
                    this.draggedEventId = null;
                    this.dragOverDay = null;
                },

// Formatting utilities
                formatDateStr(dateObj) {
                    const y = dateObj.getFullYear();
                    const m = String(dateObj.getMonth() + 1).padStart(2, '0');
                    const d = String(dateObj.getDate()).padStart(2, '0');
                    return `${y}-${m}-${d}`;
                },

formatReadableDate(dateStr) {
                    if (!dateStr) return '';
                    const [y, m, d] = dateStr.split('-');
                    const date = new Date(y, m - 1, d);
                    const days = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
                    const months = ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'];
                    return `${days[date.getDay()]} ${date.getDate()} ${months[date.getMonth()]}`;
                },

getCategoryColorClass(catName) {
                    const cat = this.categories.find(c => c.name === catName);
                    return cat ? cat.colorClass : 'bg-slate-400';
                },

getCategoryBadgeStyle(catName) {
                    const cat = this.categories.find(c => c.name === catName);
                    return cat ? cat.badgeStyle : 'bg-slate-100 text-slate-700';
                },

getCategoryLabel(catName) {
                    const cat = this.categories.find(c => c.name === catName);
                    return cat ? cat.label : catName;
                }
            };
        }
    </script>
</div>

Related Examples

Pricing Plans

ariaw

1 year ago

636
Font testing
comparing old fonts to tailwind with clamp sizing

Sherry Lynne

3 months ago

389
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Bruz

1 year ago

786
Updated customer details page
Customer details page

Olivia Smith

2 years ago

4.3k
Model Performance Rings
Model Performance Rings

Omer fils ELENGA

1 month ago

32
Cockatoo

Lokesh H

3 months ago

132
Native HTML Accordion
native html accordion summary details

Cristian

2 years ago

3k
Homepage event

Anonymous

1 year ago

1.3k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Ramkesh Gupta

1 year ago

1.1k
About Us Component

KULDEEP

1 year ago

2.1k
Our features
Our features

Tanvir Hasan Bappy (Tanvir)

1 year ago

2k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

ORGIN_DREAMS

1 year ago

1.8k