JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<body>
    <div class='wadah'> <span>Ngudang Blog</span>

<span class='logo n'>N</span>

<span class='logo g'>G</span>

<span class='logo d'>d</span>

    </div>
    <div class='gendeng'>Blog yang membahas tentang tutorial blogdan desain template blog</div>
</body>

CSS

body {
    background-color: #212A33;
    padding:100px
}
@font-face {
    font-family:"Coming Soon";
    font-style: normal;
    font-weight: 400;
    src: local("Coming Soon"), local("ComingSoon"), url("http://fonts.gstatic.com/s/comingsoon/v6/myblyOycMnPMGjfPG-DzP4bN6UDyHWBl620a-IRfuBk.woff") format("woff");
}
@font-face {
    font-family:"Gloria Hallelujah";
    font-style: normal;
    font-weight: 400;
    src: local("Gloria Hallelujah"), local("GloriaHallelujah"), url("https://fonts.gstatic.com/s/gloriahallelujah/v7/CA1k7SlXcY5kvI81M_R28S4Ak4lwO5-tupXlaheMcb0.woff") format("woff");
}
.wadah {
    width:151px;
    height:125px;
    font-family:"Gloria Hallelujah" !important;
    color:#fff;
    font-size:16px
}
.wadah span {
    display:block;
    margin:0 0 10px;
    text-align:center
}
.logo {
    height:50px;
    width:50px;
    float:left;
    margin: 0 2px 0 0;
    font-family: Georgia;
    font-size: 50px !important;
    color:#fff;
    text-align:center;
    font-size:320%;
    font-weight:bold;
    text-shadow: 2px 2px 4px #444;
    line-height: 54px;
}
.n {
    background: url('http://reinventaweb.com/theme/images/rw_bggreen.png') repeat scroll left top transparent;
    transform: rotate(-5deg);
}
.g {
    background: url('http://reinventaweb.com/theme/images/rw_bgred.png') repeat scroll left top transparent;
    transform: rotate(5deg);
}
.d {
    background: url('http://reinventaweb.com/theme/images/rw_bgcorn.png') repeat scroll left top transparent;
    transform: rotate(-3deg);
}
.gendeng {
    font-family: Coming Soon;
    color:#fff;
    font-size:12px
}