JSFiddle - React, Tailwind, and code Playground

by dav sev

HTML

<p class="alert alert-danger hand">לתשומת לבך,
  <br>
  <strong>תמונה זו תלווה אותך לאורך כל שנות לימודיך במכללה</strong> 
  ומרגע שהעלת את התמונה למידע אישי, לא תוכל/י להחליף אותה
  <br>
  באופן עצמאי.
  </p>

CSS

.alert-danger {
    color: #a94442 !important;
    background-color: #f2dede;
    border-color: #ebccd1;
    padding: 4px;
    padding-left: 40px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    /* padding-right: 17px; */
/*     display: flex;
    flex-direction: row;
    align-items: center; */

}

.alert-danger::before{
  display: block;
  position: relative;
    font-size: 2rem;
    margin: 0 10px;
    content: "\2757";
    min-width: 2rem;
    text-align: center;
}


/*pay attention*/
.alert-info {
    color: #31708f !important;
    background-color: #d9edf7;
    border-color: #bce8f1;
    padding: 4px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    /* padding-right: 17px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.alert-info::before{
    font-size: 2rem;
    content: "\270B";
    margin: 0 10px;
    min-width: 2rem;
    text-align: center;
}