51 views
CSS
1.card { 2 background-color: rgba(243, 244, 246, 1); 3 padding: 2rem; 4 max-width: 320px; 5 border-radius: 10px; 6 box-shadow: 0 20px 30px -20px rgba(5, 5, 5, 0.24); 7} 8 9.header { 10 display: flex; 11 align-items: center; 12 grid-gap: 1rem; 13 gap: 1rem; 14} 15 16.header .image { 17 height: 4rem; 18 width: 4rem; 19 border-radius: 9999px; 20 object-fit: cover; 21 background-color: royalblue; 22} 23 24.stars { 25 display: flex; 26 justify-content: center; 27 grid-gap: 0.125rem; 28 gap: 0.125rem; 29 color: rgba(34, 197, 94, 1); 30} 31 32.stars svg { 33 height: 1rem; 34 width: 1rem; 35} 36 37.name { 38 margin-top: 0.25rem; 39 font-size: 1.125rem; 40 line-height: 1.75rem; 41 font-weight: 600; 42 --tw-text-opacity: 1; 43 color: rgba(55, 65, 81, 1); 44} 45 46.message { 47 overflow: hidden; 48 display: -webkit-box; 49 -webkit-box-orient: vertical; 50 margin-top: 1rem; 51 color: rgba(107, 114, 128, 1); 52}
HTML
1<div class="card"> 2 <div class="header"> 3 <div class="image"></div> 4 <div> 5 <div class="stars"> 6 <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 7 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 8 </svg> 9 <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 10 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 11 </svg> 12 <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 13 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 14 </svg> 15 <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 16 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 17 </svg> 18 <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 19 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 20 </svg> 21 </div> 22 <p class="name">John Doe</p> 23 </div> 24 </div> 25 26 <p class="message"> 27 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt 28 voluptatem alias ut provident sapiente repellendus. 29 </p> 30</div>