Créer une story

This tailwind example is contributed by Omer fils ELENGA, on 05-Dec-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Card Modal

Author Omer fils ELENGA

Tailwind v3.4 1k 2

Fork Fullscreen

<style>
  body {
    font-family: 'Roboto', sans-serif;
    background-color: #fafafa;
  }
  
  .story-gradient {
    background: radial-gradient(circle, #ff3882 0%, #5851db 100%);
    -webkit-mask: 
      radial-gradient(40px circle at center, black 100%, transparent 100%),
      radial-gradient(36px circle at center, transparent 100%, black 100%);
    mask: 
      radial-gradient(40px circle at center, black 100%, transparent 100%),
      radial-gradient(36px circle at center, transparent 100%, black 100%);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  
  .post-hover {
    position: relative;
    overflow: hidden;
  }
  
  .post-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }
  
  .post-hover:hover::before {
    opacity: 1;
  }
  
  .heart-animation {
    animation: heart-beat 0.8s ease-in-out;
  }
  
  @keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    14%, 42% { transform: scale(1.3); }
  }
  
  .typing::after {
    content: '|';
    animation: blink 1s infinite;
  }
  
  @keyframes blink {
    50% { opacity: 0; }
  }
  
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-animation 3s ease infinite;
  }
  
  @keyframes gradient-animation {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
</style>

<div class="px-4 py-3 overflow-x-auto hide-scrollbar" x-show="showStories">
  <div class="flex space-x-3 pb-2">
    <div @click="createStory" class="flex flex-col items-center cursor-pointer group">
      <div class="w-16 h-16 rounded-full bg-gradient-to-r from-pink-500 to-yellow-500 p-1 story-gradient relative">
        <div class="w-full h-full rounded-full bg-gray-200 flex items-center justify-center">
          <i class="fas fa-plus text-white text-xl"></i>
        </div>
      </div>
      <span class="mt-1 text-xs font-medium text-gray-700">Créer</span>
    </div>
    
    <template x-for="(story, index) in stories" :key="index">
      <div @click="viewStory(story)" class="flex flex-col items-center cursor-pointer group">
        <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 p-1 story-gradient relative overflow-hidden">
          <img :src="story.image" :alt="`Story de ${story.name}`" class="w-full h-full rounded-full object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent rounded-full"></div>
          <div class="absolute bottom-1 left-0 right-0 text-white text-xs text-center font-medium truncate px-1" x-text="story.name"></div>
        </div>
        <span class="mt-1 text-xs font-medium text-gray-700 truncate max-w-[64px]" x-text="story.name"></span>
      </div>
    </template>
  </div>
</div>

<div class="px-4 pt-4 pb-3 border-b border-gray-200">
  <div class="flex items-start space-x-4">
    <div class="relative">
      <div class="w-28 h-28 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 p-1 story-gradient">
        <img :src="profileData.avatar" alt="Photo de profil" class="w-full h-full rounded-full object-cover">
      </div>
      <button @click="editProfilePicture" class="absolute bottom-1 right-1 bg-white rounded-full p-1 shadow-md border border-gray-200 hover:bg-gray-100 transition-colors" aria-label="Modifier la photo de profil">
        <i class="fas fa-camera text-gray-700 text-xs"></i>
      </button>
    </div>
    
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="font-bold text-2xl text-gray-900" x-text="profileData.fullName"></h1>
          <p class="text-sm text-gray-500" x-text="profileData.bio"></p>
          <div class="flex items-center space-x-3 mt-1">
            <button class="text-sm font-medium text-blue-500 hover:underline">Modifier le profil</button>
            <div class="w-1 h-1 rounded-full bg-gray-400"></div>
            <button class="text-sm font-medium text-blue-500 hover:underline">Voir l'archivage</button>
          </div>
        </div>
        <button @click="toggleMoreOptions" class="text-gray-700 hover:text-gray-900" aria-label="Options">
          <i class="fas fa-ellipsis-h text-xl"></i>
        </button>
      </div>
      
      <div class="grid grid-cols-3 gap-3 mt-4">
        <div class="text-center">
          <span class="font-bold text-gray-900" x-text="profileData.posts"></span>
          <p class="text-xs text-gray-500">posts</p>
        </div>
        <div class="text-center">
          <span class="font-bold text-gray-900" x-text="profileData.followers"></span>
          <p class="text-xs text-gray-500">followers</p>
        </div>
        <div class="text-center">
          <span class="font-bold text-gray-900" x-text="profileData.following"></span>
          <p class="text-xs text-gray-500">following</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="border-t border-gray-200">
  <div class="flex">
    <button @click="activeTab = 'posts'" :class="{'text-black font-medium border-b-2 border-black': activeTab === 'posts'}" class="flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors" aria-label="Posts">
      <i class="fas fa-th text-xl"></i>
    </button>
    <button @click="activeTab = 'reels'" :class="{'text-black font-medium border-b-2 border-black': activeTab === 'reels'}" class="flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors" aria-label="Reels">
      <i class="fas fa-film text-xl"></i>
    </button>
    <button @click="activeTab = 'tagged'" :class="{'text-black font-medium border-b-2 border-black': activeTab === 'tagged'}" class="flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors" aria-label="Tagged">
      <i class="fas fa-tag text-xl"></i>
    </button>
    <button @click="activeTab = 'saved'" :class="{'text-black font-medium border-b-2 border-black': activeTab === 'saved'}" class="flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors" aria-label="Enregistrés">
      <i class="fas fa-bookmark text-xl"></i>
    </button>
  </div>
</div>

<div class="grid grid-cols-3 gap-0.5" x-show="activeTab === 'posts'">
  <template x-for="(post, index) in posts" :key="index">
    <div @click="viewPost(post)" class="aspect-square post-hover cursor-pointer group relative overflow-hidden">
      <img :src="post.image" :alt="`Post ${index + 1}`" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10">
        <div class="flex space-x-6">
          <div class="flex flex-col items-center text-white">
            <div class="bg-black/50 rounded-full p-2 mb-1">
              <i class="fas fa-heart text-xl"></i>
            </div>
            <span class="font-medium" x-text="post.likes"></span>
          </div>
          <div class="flex flex-col items-center text-white">
            <div class="bg-black/50 rounded-full p-2 mb-1">
              <i class="fas fa-comment text-xl"></i>
            </div>
            <span class="font-medium" x-text="post.comments"></span>
          </div>
        </div>
      </div>
    </div>
  </template>
</div>

<div x-show="activeTab === 'reels'" class="p-4">
  <div class="space-y-4">
    <template x-for="(reel, index) in reels" :key="index">
      <div class="flex items-start space-x-3 group cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors">
        <div class="relative">
          <div class="w-16 h-16 rounded-xl overflow-hidden">
            <img :src="reel.thumbnail" :alt="reel.title" class="w-full h-full object-cover">
          </div>
          <div class="absolute inset-0 flex items-center justify-center">
            <i class="fas fa-play-circle text-white text-2xl opacity-0 group-hover:opacity-100 transition-opacity"></i>
          </div>
        </div>
        
        <div class="flex-1 min-w-0">
          <p class="font-medium text-gray-900 truncate" x-text="reel.title"></p>
          <p class="text-xs text-gray-500" x-text="`${reel.views} vues`"></p>
        </div>
        
        <div class="flex items-center space-x-2">
          <button @click.stop="likeReel(reel)" class="text-gray-500 hover:text-red-500 transition-colors" aria-label="Aimer">
            <i :class="reel.liked ? 'fas fa-heart text-red-500' : 'far fa-heart'" class="text-xl"></i>
          </button>
          <span class="text-xs text-gray-500" x-text="reel.likes"></span>
        </div>
      </div>
    </template>
  </div>
</div>

<div x-show="showMoreOptions" class="fixed inset-0 bg-black/50 flex items-end justify-center z-50" @click="showMoreOptions = false">
  <div class="bg-white rounded-t-xl w-full max-w-md" @click.stop>
    <div class="p-4 space-y-3">
      <button class="w-full text-left py-3 text-gray-700 hover:bg-gray-100 rounded-lg px-3 font-medium">Partager ce profil</button>
      <button class="w-full text-left py-3 text-gray-700 hover:bg-gray-100 rounded-lg px-3 font-medium">Copier le lien du profil</button>
      <button class="w-full text-left py-3 text-gray-700 hover:bg-gray-100 rounded-lg px-3 font-medium">Ajouter à vos favoris</button>
      <button class="w-full text-left py-3 text-gray-700 hover:bg-gray-100 rounded-lg px-3 font-medium">Bloquer</button>
      <button class="w-full text-left py-3 text-gray-700 hover:bg-gray-100 rounded-lg px-3 font-medium">Signaler</button>
    </div>
    <div class="p-4">
      <button @click="showMoreOptions = false" class="w-full py-3 text-gray-700 font-medium rounded-lg bg-gray-100 hover:bg-gray-200">Annuler</button>
    </div>
  </div>
</div>

<div x-show="currentStory" class="fixed inset-0 bg-black z-50 flex items-center justify-center" @click="closeStory">
  <div class="relative w-full h-full max-w-md" @click.stop>
    <div class="relative w-full h-full">
      <img :src="currentStory ? currentStory.image : ''" :alt="`Story de ${currentStory ? currentStory.name : ''}`" class="w-full h-full object-contain">
      <div class="absolute top-4 left-4 right-4 flex items-center justify-between">
        <div class="flex items-center space-x-2">
          <div class="w-8 h-8 rounded-full overflow-hidden">
            <img :src="currentStory ? currentStory.image : ''" alt="Profile" class="w-full h-full object-cover">
          </div>
          <div>
            <p class="font-bold text-white" x-text="currentStory ? currentStory.name : ''"></p>
            <p class="text-xs text-white/75">Il y a 2 heures</p>
          </div>
        </div>
        <button @click="closeStory" class="text-white" aria-label="Fermer">
          <i class="fas fa-times text-xl"></i>
        </button>
      </div>
      <div class="absolute bottom-4 left-4 right-4 flex items-center justify-between">
        <div class="flex space-x-4">
          <button class="text-white" aria-label="Commenter">
            <i class="far fa-comment text-xl"></i>
          </button>
          <button class="text-white" aria-label="Partager">
            <i class="fas fa-paper-plane text-xl"></i>
          </button>
        </div>
        <button @click="closeStory" class="text-white" aria-label="Enregistrer">
          <i class="far fa-bookmark text-xl"></i>
        </button>
      </div>
    </div>
  </div>
</div>

<div x-show="creatingStory" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
  <div class="bg-white rounded-2xl w-11/12 max-w-md p-6 relative">
    <button @click="creatingStory = false" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700" aria-label="Fermer">
      <i class="fas fa-times text-xl"></i>
    </button>
    
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-900">Créer une story</h2>
      <p class="text-gray-500 mt-1">Ajoutez une photo ou une vidéo</p>
    </div>
    
    <div class="flex justify-center mb-6">
      <div class="w-32 h-32 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 p-2 flex items-center justify-center story-gradient">
        <div class="w-full h-full rounded-full bg-gray-200 flex items-center justify-center">
          <i class="fas fa-camera text-gray-600 text-3xl"></i>
        </div>
      </div>
    </div>
    
    <div class="space-y-4">
      <button class="w-full py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-medium rounded-lg hover:opacity-90 transition-opacity">
        <i class="fas fa-camera mr-2"></i> Prendre une photo
      </button>
      <button class="w-full py-3 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-colors">
        <i class="fas fa-image mr-2"></i> Choisir depuis la galerie
      </button>
      <button class="w-full py-3 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-colors">
        <i class="fas fa-video mr-2"></i> Enregistrer une vidéo
      </button>
    </div>
  </div>
</div>

<button @click="showCreateMenu = !showCreateMenu" class="fixed bottom-6 right-6 w-14 h-14 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center shadow-lg z-40 animate-float" aria-label="Créer">
  <i class="fas fa-plus text-white text-2xl"></i>
</button>

<div x-show="showCreateMenu" class="fixed bottom-20 right-6 bg-white rounded-xl shadow-lg py-2 w-48 z-30" @click.outside="showCreateMenu = false">
  <button class="flex items-center w-full px-4 py-3 hover:bg-gray-100 transition-colors">
    <i class="fas fa-image text-pink-500 mr-3"></i>
    <span class="font-medium">Publication</span>
  </button>
  <button class="flex items-center w-full px-4 py-3 hover:bg-gray-100 transition-colors">
    <i class="fas fa-video text-blue-500 mr-3"></i>
    <span class="font-medium">Reel</span>
  </button>
  <button class="flex items-center w-full px-4 py-3 hover:bg-gray-100 transition-colors">
    <i class="fas fa-tv text-purple-500 mr-3"></i>
    <span class="font-medium">Story</span>
  </button>
  <button class="flex items-center w-full px-4 py-3 hover:bg-gray-100 transition-colors">
    <i class="fas fa-user-plus text-green-500 mr-3"></i>
    <span class="font-medium">Room</span>
  </button>
</div>

<div x-show="notification.show" class="fixed top-4 right-4 bg-black text-white px-4 py-3 rounded-lg shadow-lg z-50 transition-all duration-300" 
     :class="{'opacity-0 translate-y-4': !notification.show, 'opacity-100 translate-y-0': notification.show}">
  <i class="fas fa-check-circle mr-2"></i>
  <span x-text="notification.message"></span>
</div>

init() {
        this.animateElements();
        this.loadProfileData();
      },

animateElements() {
        setTimeout(() => {
          this.showStories = true;
        }, 300);
      },

loadProfileData() {
        setTimeout(() => {
          this.showNotification('Bienvenue sur votre profil Instagram !');
        }, 1000);
      },

toggleMoreOptions() {
        this.showMoreOptions = !this.showMoreOptions;
      },

viewStory(story) {
        this.currentStory = story;
        document.body.style.overflow = 'hidden';
      },

closeStory() {
        this.currentStory = null;
        document.body.style.overflow = 'auto';
      },

createStory() {
        this.creatingStory = true;
      },

editProfilePicture() {
        this.showNotification('Modifier la photo de profil');
      },

likeReel(reel) {
        reel.liked = !reel.liked;
        
        // Simpler likes handling
        const likes = parseInt(reel.likes) || 0;
        reel.likes = reel.liked ? likes + 1 : likes - 1;
        
        this.showNotification(reel.liked ? 'Like ajouté !' : 'Like retiré');
      },

viewPost(post) {
        this.showNotification(`Ouverture du post #${post.id}`);
      },

showNotification(message) {
        this.notification.show = true;
        this.notification.message = message;
        
        setTimeout(() => {
          this.notification.show = false;
        }, 3000);
      }
    }
  }

// Initialize animations
  document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('[class*="animate-"]');
    elements.forEach((el, index) => {
      el.style.opacity = '0';
      el.style.transform = 'translateY(20px)';
      
      setTimeout(() => {
        el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
      }, 200 * index);
    });
  });
</script>

Related Examples

Confirmation model

Mr Robot

4 years ago

13.6k
Confirmation modal/card

Sophia Baker

3 years ago

16.6k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

anandu ap

2 years ago

4k
File Upload

Rajesh Maheshwari

1 year ago

1.5k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

971
new Save Component tailwindflex
new Save Component tailwindflex

Omer fils ELENGA

5 months ago

360
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Nicole Shalom

1 year ago

1.8k
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

SHARIFUL ISLAM

1 year ago

1.4k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.2k
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

KULDEEP

1 year ago

1.2k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Anonymous

1 year ago

1.9k
Profile Card
Simple and Attractive Profile card in tailwind css

KULDEEP

1 year ago

1.1k