Can I use "Reviews example with pure CSS" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Reviews example with pure CSS — Free Utilities Snippet (Bootstrap 5)

Loading…

1<div class="review-container"> 2 <h2>Reviews</h2> 3 <label for="search" class="input-field"> 4 <i class="fas fa-search"></i> 5 <input id="search" placeholder="Search for reviews ..." type="text"> 6 </label> 7 <div class="suggest"> 8 <span>expriance</span> 9 <span>quality</span> 10 <span>design</span> 11 <span>size</span> 12 <span>features</span> 13 <span>values</span> 14 <span>replacement</span> 15 </div> 16 17 <div class="cards"> 18 <div class="card"> 19 <div class="card-top"> 20 <div class="name"> 21 <div class="img one" alt="">NF</div> 22 <p>Full Name</p> 23 </div> 24 <div class="rate"> 25 <i class="fas fa-star"></i> 26 <i class="fas fa-star"></i> 27 <i class="fas fa-star"></i> 28 <i class="fas fa-star"></i> 29 <i class="fas fa-star-half"></i> 30 </div> 31 </div> 32 33 <div class="card-content"> 34 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem consequuntur, impedit ullam provident deserunt repellendus fuga totam exercitationem minima molestias?</p> 35 </div> 36 37 <div class="card-action"> 38 <span>13 Feb, 2021</span> 39 <button class="btn"> 40 <i class="fas fa-external-link-alt"></i> 41 Share 42 </button> 43 </div> 44 45 </div> 46 <div class="card"> 47 <div class="card-top"> 48 <div class="name"> 49 <div class="img">FN</div> 50 <p>Full Name</p> 51 </div> 52 <div class="rate"> 53 <i class="fas fa-star"></i> 54 <i class="fas fa-star"></i> 55 <i class="fas fa-star"></i> 56 <i class="fas fa-star"></i> 57 <i class="fas fa-star-half"></i> 58 </div> 59 </div> 60 61 <div class="card-content"> 62 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem consequuntur, impedit ullam provident deserunt repellendus fuga totam exercitationem minima molestias?</p> 63 </div> 64 65 <div class="card-action"> 66 <span>13 Feb, 2021</span> 67 <button class="btn"> 68 <i class="fas fa-external-link-alt"></i> 69 Share 70 </button> 71 </div> 72 73 </div> 74 </div> 75</div> 76

Reviews example with pure CSS

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection