JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<div class="helpcard">

  
  <details class="warning helpcenter">
    <summary><img style="max-width: 360px; width: 100%; height: auto" src=https://rsavid1.b-cdn.net/click4help.gif /></summary>
    <p>Some text to be hidden.</p> 
    <p>Some text to be hidden.</p> 
    <p>Some text to be hidden.</p> 
    <p>Some text to be hidden.</p> 
  </details>
</div>

CSS

.helpcenter img {        
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.helpcard {
  background: white;
  padding: 38px 36px;
  margin-top: 40px;
  margin-bottom: 40px;
  border-radius: 4px;
  width: 90%;
  
  details {
    display: flex;
    
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0, 0, 0, .05);
    border-left: 10px solid gray;
    padding:2px 15px;
    
    &.warning {
       --highlight: #ff0066 ;
      background: #fff;
      border-left-color: #ff0066;
    }
    
    summary,p {
      position:relative;
      display:flex;
      flex-direction:row;
      align-content: center;
      justify-content: flex-start;
      color: black;
      padding: 0px;
      cursor:pointer;
      &::-webkit-details-marker {
        display:none;
      }
      &:focus {
        outline: solid 3px var(--highlight);
        border-radius: 4px;
       background: linear-gradient(to right, rgba(255,0,102,1) 0%,rgba(255,0,102,1) 3%,rgba(255,255,255,1) 6%,rgba(255,255,255,1) 6%,rgba(255,255,255,1) 94%,rgba(255,0,102,1) 97%,rgba(255,0,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


      }
     
    } 
    }  }