JSFiddle - React, Tailwind, and code Playground

by SKYNET NETWORK

HTML

<p>
<a class="button blue big" href="#">سكاي نت  - زر ازرق كبير</a>
</p>
<p>
<a class="button green big" href="#">سكاي نت  - زر اخضر كبير</a>
</p>

<a class="button red big" href="#">سكاي نت  - زر أحمر كبير</a>


<a class="button purple big" href="#">سكاي نت  - زر الأرجواني كبير</a>


<a class="button seagreen big" href="#">سكاي نت  - زر ازرق فاتح (بحرى) كبير</a>


<a class="button blue medium" href="#">سكاي نت  - زر أزرق متوسط</a>


<a class="button green medium" href="#">سكاي نت  - زر أخضر متوسط</a>


<a class="button red medium" href="#">سكاي نت  - زر احمر متوسط</a>


<a class="button purple medium" href="#">سكاي نت  - زر أرجوانى متوسط</a>


<a class="button seagreen medium" href="#">سكاي نت  - زر ازرق فاتح (بحرى) متوسط</a>


<a class="button blue small" href="#">سكاي نت  - زر ازرق صغير</a>


<a class="button green small" href="#">سكاي نت  - زر اخضر صغير</a>


<a class="button red small" href="#">سكاي نت  - زر احمر صغير</a>


<a class="button purple small" href="#">سكاي نت  - زر ارجوانى صغير</a>


<a class="button seagreen small" href="#">سكاي نت  - >زر ازرق فاتح (بحرى) صغير</a>

CSS

@font-face {
font-family: 'ges';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype'); }
@font-face {
font-family: "jfr";
src: url('https://bouyadrane.googlecode.com/svn/trunk/fonts/JF-Flat-regular.eot');
src: url('https://bouyadrane.googlecode.com/svn/trunk/fonts/JF-Flat-regular.eot?#iefix') format('embedded-opentype'),
url('https://bouyadrane.googlecode.com/svn/trunk/fonts/JF-Flat-regular.svg#JF Flat Regular') format('svg'),
url('https://bouyadrane.googlecode.com/svn/trunk/fonts/JF-Flat-regular.woff') format('woff'),
url('https://bouyadrane.googlecode.com/svn/trunk/fonts/JF-Flat-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bouyardane';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype'); }
.button {color:white!important; font-family: jfr, bouyardane, ges; margin:10px 10px 10px 0;text-decoration:none!important;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}
.green:hover {background: #27ae60;}
.red {background: #e74c3c;border-bottom: 3px solid...