JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<div class="covid-box" id="covid">
  <div class="covid-img">
    <picture>
      <source srcset="https://3.bp.blogspot.com/-3RDUxnfsMcU/XqLnQzzzy2I/AAAAAAAAAJE/TEiX6Sjw8IApwIYhSGwsCsqlS0TVr67ZACLcBGAsYHQ/s200-rw/burung-garuda.png" type="image/webp" />
      <source srcset="https://3.bp.blogspot.com/-3RDUxnfsMcU/XqLnQzzzy2I/AAAAAAAAAJE/TEiX6Sjw8IApwIYhSGwsCsqlS0TVr67ZACLcBGAsYHQ/s200/burung-garuda.png" type="image/png" />
      <img alt="covid-19" src="https://3.bp.blogspot.com/-3RDUxnfsMcU/XqLnQzzzy2I/AAAAAAAAAJE/TEiX6Sjw8IApwIYhSGwsCsqlS0TVr67ZACLcBGAsYHQ/s200/burung-garuda.png" width="1" height="1" title="Covid-19" />
    </picture>
  </div>
  <div class="covid-info">
    <h2>COVID-19</h2>
    <div class="covid-text">Dapatkan informasi terbaru tentang Virus Corona
      COVID-19 di Indonesia.</div>
    <div class="btn-covid">
      <a class="more-covid" href="https://www.covid19.go.id/" target="_blank" rel="nofollow noopener" title="Learn more" onclick="document.getElementById(&quot;covid&quot;).style.display=&quot;none&quot;">Learn more</a>
      <div aria-label="Close Note" class="close-covid" onclick="document.getElementById(&quot;covid&quot;).style.display=&quot;none&quot;" role="button" tabindex="0">Dismiss</div>
    </div>
  </div>
</div>

CSS

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.covid-box{width:calc(100% - 40px);max-width:640px;height:190px;background:#fff;box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);position:fixed;left:20px;bottom:20px;z-index:999;}
.covid-img,.covid-info{height:190px;float:left;padding:10px;}
.covid-img{width:190px;background:#333}
.covid-img img{width:100%;height:100%;display:block;}
.covid-info{width:calc(100% - 190px);padding:20px;font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;color:#555;position:relative}
.covid-info h2{font-size:20px;font-weight:400;line-height:1;margin:0 0 20px;color:#333;}
.btn-covid{width:100%;border-top:1px solid #dedede;position:absolute;left:0;bottom:0;padding:0 10px}
.close-covid,.more-covid{float:right;padding:8px 10px;line-height:30px;text-decoration:none;color:#555;cursor:pointer;}
@media screen and (max-width:425px){.covid-img{display:none;}.covid-info{width:100%;}}