JSFiddle - React, Tailwind, and code Playground

by kerani

HTML

<div class="text-arab">
أَللّهُمَّ بَارِكْ لَنَا فِيْمَا رَزَقْتَنَا وَقِنَا عَذَابَ النَّارِ
</div>

CSS

@font-face {
    font-family: 'me_quran'; 
    src: url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.eot');
    src: url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.ttf') format('truetype'),
         url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.svg#me_quran') format('svg');font-weight: normal;font-weight: 400;font-style: normal;
}
.text-arab{font-size:22px;line-height:2.2;font-family:me_quran,sans-serif;font-weight:400;text-align:right;direction:rtl}
/* Button */
@font-face{font-family:"Product Sans";src:url("https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-download,a.btn-play,a.btn-google,a.btn-apple,a.btn-play:hover,a.btn-download:hover,a.btn-google:hover,a.btn-apple:hover{color:#fff}
.btn{display:inline-block;padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-play{color:#fff;background-color:#D32F2F;border-color:#C62828;padding:10px 16px 10px 40px;position:relative;font-family: 'Product Sans', Arial,...