JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="article-inner-content-box note bgcolor">
<div class="article-inner-content-icon icon-awe-note"></div>
<div class="article-inner-content-text"><strong>Note:</strong> When you have solved the problem, you should re-enable the antivirus program as soon as possible since if the antivirus is disabled, the computer is vulnerable to attack.</div>
</div>

CSS

.article-inner-content-box{display:table;width:100%;font-size:0;border-left:6px solid #d81c1b;background-color:#fff;box-shadow:#e9e9e9 2px 0 20px}.article-inner-content-box.note{border-color:#16a537}.article-inner-content-box.tip{border-color:#1d7bc1}.article-inner-content-box.warn{border-color:#ef6f0e}.article-inner-content-box.note.bgcolor{background-color:#e6ffec}.article-inner-content-box.tip.bgcolor{background-color:#e8f5ff}.article-inner-content-box.warn.bgcolor{background-color:#fffae8}.article-inner-content-box.note .article-inner-content-icon{color:#16a537}.article-inner-content-box.tip .article-inner-content-icon{color:#1d7bc1}.article-inner-content-box.warn .article-inner-content-icon{color:#ef6f0e}.article-inner-content-icon{display:table-cell;width:80px;height:auto;font-size:40px;text-align:center;vertical-align:middle}.article-inner-content-text{display:table-cell;padding:20px 20px 20px 0;font-size:16px}.article-inner-content-text.noicon{padding:20px}

.article-inner-content-box,.article-quote-content-box{margin:15px 0}.article-recommend-title{font-size:18px}.article-recommend-info{font-size:14px}.article-recommend-readmore{font-size:12px}.article-inner-content-text{font-size:14px}a.article-inner-twitter-boxbtn{font-size:16px;padding:20px}a.article-inner-twitter-boxbtn span.article-click-to-twitter{font-size:14px}.article-recommend,.article-inner-content-box{border-left-width:4px}.article-buy-btn,.article-down-btn{margin:15px 0}.article-comments{width:100%;display:block;margin-right:0}.article-tags{width:100%;display:block}.comments-content-wrap{width:100%;right:-150%}.news-page-wrap .article-header-content{padding:0 30px}.news-page-wrap .article-content{padding:40px 20px}.article-author-infos h2{position:static;font-size:1.25rem;color:#676767;background-color:transparent}}@media screen and (max-width:479px){.article-inner-content-box{padding:20px;border-top:6px solid...