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 26

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

Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Icon group

Conan Hilton

3 years ago

10.4k
Websites built to perform beautifully.
We design high-impact websites that convert and scale. From sleek interfaces to full stack experiences, we bring your brand to life online.

Alif Bima Pradana

8 months ago

583
profile
user profile

gidy

1 year ago

1.1k
dashboard

Anonymous

6 days ago

7
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Nicole Shalom

1 year ago

1.9k
Visernic Brand Logo | Logo Vector
Official SVG logo of Visernic Limited—a digital solutions agency offering software development, IT consulting, cybersecurity, and digital marketing worldwide. This vector asset is fully scalable and optimized for fast web performance.

Visernic

2 months ago

178
Font testing
comparing old fonts to tailwind with clamp sizing

Sherry Lynne

2 months ago

359
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
machine
tell you how your MAC pc work

gidy

11 months ago

751
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Abdul Baset Bappy

1 year ago

2.6k