693 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.success { 20 padding: 1rem; 21 border-radius: 0.375rem; 22 background-color: rgb(240 253 244); 23} 24 25.succes-svg { 26 color: rgb(74 222 128); 27 width: 1.25rem; 28 height: 1.25rem; 29} 30 31.success-prompt-wrap { 32 margin-left: 0.75rem; 33} 34 35.success-prompt-heading { 36 font-weight: bold; 37 color: rgb(22 101 52); 38} 39 40.success-prompt-prompt { 41 margin-top: 0.5rem; 42 color: rgb(21 128 61); 43} 44 45.success-button-container { 46 display: flex; 47 margin-top: 0.875rem; 48 margin-bottom: -0.375rem; 49 margin-left: -0.5rem; 50 margin-right: -0.5rem; 51} 52 53.success-button-main { 54 padding-top: 0.375rem; 55 padding-bottom: 0.375rem; 56 padding-left: 0.5rem; 57 padding-right: 0.5rem; 58 background-color: #ECFDF5; 59 color: rgb(22 101 52); 60 font-size: 0.875rem; 61 line-height: 1.25rem; 62 font-weight: bold; 63 border-radius: 0.375rem; 64 border: none 65} 66 67.success-button-main:hover { 68 background-color: #D1FAE5; 69} 70 71.success-button-secondary { 72 padding-top: 0.375rem; 73 padding-bottom: 0.375rem; 74 padding-left: 0.5rem; 75 padding-right: 0.5rem; 76 margin-left: 0.75rem; 77 background-color: #ECFDF5; 78 color: #065F46; 79 font-size: 0.875rem; 80 line-height: 1.25rem; 81 border-radius: 0.375rem; 82 border: none; 83} 84
HTML
1<div class="notifications-container"> 2 <div class="success"> 3 <div class="flex"> 4 <div class="flex-shrink-0"> 5 6 <svg class="succes-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 7 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> 8 </svg> 9 </div> 10 <div class="success-prompt-wrap"> 11 <p class="success-prompt-heading">Order completed 12 </p><div class="success-prompt-prompt"> 13 <p>You're happy now? Does this impulsive action is really going to satisfy you? Don't answer me, answer yourself. Anyway, your party-size pizza combo is on it's way.</p> 14 </div> 15 <div class="success-button-container"> 16 <button type="button" class="success-button-main">View status</button> 17 <button type="button" class="success-button-secondary">Dismiss</button> 18 </div> 19 </div> 20 </div> 21 </div> 22</div>