Engage users with an AI interface that captures attention through vibrantly animated glow orbs and a print-inspired card design. Perfect for chat and interactive LLM experiences.
1<section class="gs-stage">
2 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
3 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
4 <div class="gs-grid-overlay" aria-hidden="true"></div>
5 <div class="gs-card">
6 <div class="gs-card-inner">
7 <header class="d-flex justify-content-between align-items-center mb-4">
8 <h2 class="fs-3 mb-0">AI Chat Interface</h2>
9 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="lucide lucide-message-square">
10 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"></path>
11 </svg>
12 </header>
13 <div class="chat-box mb-3">
14 <div class="chat-stream">
15 <p>User01: "What can you do?"</p>
16 <p class="ai-response">AI: "I can assist you with a variety of tasks from scheduling to recommendations!"</p>
17 </div>
18 </div>
19 <footer>
20 <div class="d-flex gap-2">
21
22 <button class="btn btn-accent">Send</button>
23 </div>
24 </footer>
25 </div>
26 </div>
27</section>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
45
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.