Home
Omer fils ELENGA
Créer une story

Créer une story

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

Card Modal

Author Omer fils ELENGA

249

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

Author:
Mr Robot

3 years ago

13.1k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

15.5k
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.

Author:
anandu ap

1 year ago

2.3k
File Upload

Author:
Rajesh Maheshwari

9 months ago

975
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

1 month ago

40
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

8 months ago

637
offer card

Author:
ABDO-SY

9 months ago

1k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.6k
Avtar Cards
this is cards, for the profile section

Author:
pablitodgb

6 months ago

280
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

6.4k
Tailwind CSS Blog Card

Author:
Morris Muriuki Muthigani

5 months ago

299
Error popup modal

Author:
Odessa Young

2 years ago

16.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components