147 views
CSS
1.notifications-container { 2 width: 320px; 3 height: auto; 4 font-size: 0.875rem; 5 line-height: 1.25rem; 6 display: flex; 7 flex-direction: column; 8 gap: 1rem; 9} 10 11.flex { 12 display: flex; 13} 14 15.flex-shrink-0 { 16 flex-shrink: 0; 17} 18 19.error-alert { 20 border-radius: 0.375rem; 21 padding: 1rem; 22 background-color: rgb(254 242 242); 23} 24 25.error-svg { 26 color: #F87171; 27 width: 1.25rem; 28 height: 1.25rem; 29} 30 31.error-prompt-heading { 32 color: #991B1B; 33 font-size: 0.875rem; 34 line-height: 1.25rem; 35 font-weight: bold; 36} 37 38.error-prompt-container { 39 display: flex; 40 flex-direction: column; 41 margin-left: 1.25rem; 42} 43 44.error-prompt-wrap { 45 margin-top: 0.5rem; 46 color: #B91C1C; 47 font-size: 0.875rem; 48 line-height: 1.25rem; 49} 50 51.error-prompt-list { 52 padding-left: 1.25rem; 53 margin-top: 0.25rem; 54 list-style-type: disc; 55}
HTML
1<div class="notifications-container"> 2 <div class="error-alert"> 3 <div class="flex"> 4 <div class="flex-shrink-0"> 5 6 <svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="error-svg"> 7 <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" fill-rule="evenodd"></path> 8 </svg> 9 </div> 10 <div class="error-prompt-container"> 11 <p class="error-prompt-heading">Your password isn't strong enough 12 </p><div class="error-prompt-wrap"> 13 <ul class="error-prompt-list" role="list"> 14 <li>Password must be at least !8 characters</li> 15 <li>Password must include Elon's baby name</li> 16 </ul> 17 </div> 18 </div> 19 </div> 20 </div> 21</div>