JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div class="messageList">

  <div class="msgBox">
    <div class="msgWrapper">
      <div class="msgIcon">
        II
      </div>
      <div class="msgCenter">
        <h4 class="msgType">Datensatz erfolgreich gespeichert!</h4>
        <h4 class="msgContent">undefined</h4>
        <span class="msgTime">11:29:44</span>
        <a class="msgLink" href="#">http://localhost:9090/exemplar/template/show/sort_name/asc/o/4/go/4/template_id/81</a>
      </div>
      <div class="msgClose">
        X
      </div>
    </div>
  </div>
  <div class="msgBox">
    <div class="msgWrapper">
      <div class="msgIcon">
        II
      </div>
      <div class="msgCenter">
        <h4 class="msgType">Datensatz erfolgreich gespeichert!</h4>
        <h4 class="msgContent">undefined</h4>
        <span class="msgTime">11:29:44</span>
        <a class="msgLink" href="#">http://localhost:9090/exemplar/template/show/sort_name/asc/o/4/go/4/template_id/81</a>
      </div>
      <div class="msgClose">
        X
      </div>
    </div>
  </div>
  <div class="msgBox">
    <div class="msgWrapper">
      <div class="msgIcon">
        II
      </div>
      <div class="msgCenter">
        <h4 class="msgType">Datensatz erfolgreich gespeichert!</h4>
        <h4 class="msgContent">undefined</h4>
        <span class="msgTime">11:29:44</span>
        <a class="msgLink" href="#">http://localhost:9090/exemplar/template/show/sort_name/asc/o/4/go/4/template_id/81</a>
      </div>
      <div class="msgClose">
        X
      </div>
    </div>
  </div>
  <div class="msgBox">
    <div class="msgWrapper">
      <div class="msgIcon">
        II
      </div>
      <div class="msgCenter">
        <h4 class="msgType">Datensatz erfolgreich gespeichert!</h4>
        <h4 class="msgContent">undefined</h4>
        <span class="msgTime">11:29:44</span>
        <a class="msgLink" href="#">http://localhost:9090/exemplar/template/show/sort_name/asc/o/4/go/4/template_id/81</a>
      </div>
      <div class="msgClose">
     ...

SCSS

.messageList{
  width: 400px;
  background-color: gray;
  
  .msgBox{
    width: 100%;
    margin-bottom: 10px;
    background-color: lightgray;
    
    .msgWrapper{
      display: flex;
      gap: 10px;
    
      .msgIcon{    
        background-color: red;
      }
      .msgCenter{
        flex-grow: 1;
         background-color: blue;
      }
      .msgClose{
        background-color: green;
      }
    }  
  }
}