JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="avatar">
    <!-- 髪 -->
    <div class="hair">
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
    </div>
    <!-- 頭 -->
    <div class="face">
        <!-- 鼻 -->
        <div class="nose"></div>
        <!-- 目 -->
        <div class="eye left"><div class="parts"></div></div>
        <div class="eye right"><div class="parts"></div></div>
        <!-- 耳 -->
        <div class="ear left"><div class="parts"></div></div>
        <div class="ear right"><div class="parts"></div></div>
        <!-- 口 -->
        <div class="mouth"></div>
        <!-- 頬 -->
        <div class="cheek left"></div>
        <div class="cheek right"></div>
    </div>
    <!-- 体 -->
    <div class="body">
        <!-- 服 -->
        <div class="cloth">
            <div class="parts"></div><div class="parts"></div>
            <div class="parts"></div><div class="parts"></div>
        </div>
        <!-- 腕 -->
        <div class="arm left"><div class="parts"></div></div>
        <div class="arm right"><div class="parts"></div></div>
        <!-- 足 -->
        <div class="leg left"><div class="parts"></div></div>
        <div class="leg right"><div class="parts"></div></div>
    </div>
    <!-- その他 -->
    <div class="decoration">
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
    </div>
</div>



<!-- 素体 -->
<div class="avatar hatyune">
    <div class="hair hair_39">
        <div class="parts"></div><div class="parts"></div><div class="parts"></div><div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div><div class="parts"></div><div class="parts"></div><div class="parts"></div>
    </div>
    <div class="face">
       ...

CSS

/*
 * Common
 */
body{
    padding:30px;
    overflow:hidden;
}
div:hover {
    xoutline:1px solid rgba(255,0,0,0.5);
}
.avatar{
    display:inline-block;
    margin:0 40px 20px 0;
}
/*
 * Avatar
 */
.avatar{
    position:relative;
    width:80px;
    height:120px;
    -webkit-user-select:none;
}
/*
 * Face
 */
    .avatar .face{
        position:absolute;
        top:0;
        left:0;
        width:80px;
        height:70px;
        z-index:3;
        border-radius:40px 40px 30px 30px / 40px 40px 30px 30px;
        background:#f9e6ad;
    }
    /*
     * Eye
     */
        .avatar .face .eye{
            position:absolute;
            top:38px;
            width:10px;
            height:10px;
            background:#000;
            border-radius:5px;
        }
        .avatar .face .eye:before{
            content:'';
            display:block;
            position:absolute;
            top:2px;
            left:2px;
            width:2px;
            height:2px;
            border-radius:1px;
            background:#fff;
        }
            .avatar .face .eye.left {left:18px;}
            .avatar .face .eye.right{right:18px;}
                .avatar .face .eye .parts{
                    position:absolute;
                    top:-1px;
                    width:24px;
                    height:10px;
                    border-top:2px solid #000;
                    border-radius:10px 10px 0 0 / 10px 10px 0 0;
                }
                    .avatar .face .eye.left  .parts{left:-8px; -webkit-transform:rotate(-5deg);}
                    .avatar .face .eye.right .parts{right:-8px; -webkit-transform:rotate(5deg);}
    /*
     * Nose
     */
        .avatar .face .nose{
            position:absolute;
            top:48px;
            left:34px;
            width:12px;
            height:10px;
            border-top:2px solid #e69e51;
            border-radius:10px 10px 0 0 / 10px 10px 0 0;
        }
    /*
     * Mouth
     */
       .avatar .face...