JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="importmessage">
  <div class="importmessage__icon">
    X
  </div>
  <div class="importmessage__body">
    <h3 class="importmessage__body__header">Test header</h3>
    <p class="importmessage__body__text">testing this out for a subtext</p>
    
    <a href="" class="importmessage__body__link">Click to hide preview</a>
    <div class="importmessage__body__dropdown">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, distinctio, eligendi. Inventore debitis dolor doloremque, necessitatibus quo commodi dignissimos hic rem non facilis totam repellendus obcaecati quas molestiae velit, perspiciatis?
    </div>
  </div>
</div>

SCSS

body {
  background: #fff;
  width: 100%;
  height: 100%;
  font-style: 14px;
}
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.importmessage {

  box-shadow: inset 0 0 1px red;
  background: rgba(250,0,0,0.05);
  width: 95%;
  max-width: 95%;
  display: flex;
  padding: 1rem 1.5rem;

  &__icon {
    
    $iconsize: 46px;
    min-width:  $iconsize;
    min-height:  $iconsize;
    width:  $iconsize;
    height:  $iconsize;
    border-radius:  $iconsize;
    text-align: center;
    line-height:  $iconsize;
    box-shadow: inset 0 0 1px red;
    flex: 0;
    margin-right: 1.5rem;
  }
  
  &__body {
    
    &__header {
      
      font-weight: 600;
      margin: 0 0 0.5rem;
    }
    
    &__text {
      
      margin-bottom: 0.5rem;
    }
    
    &__link {
      
      display: inline-block;
      margin-bottom: 0.5rem;
    }
    
    &__dropdown {
      
      /* border: 1px solid black; */
      max-height: 25px;
      overflow:hidden;
    }
    
  }
  
}