JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <h1>正方形</h1>
        <div id="square"></div>
        <h1>长方形</h1>
        <div id="rectangle"></div>
        <h1>圆形</h1>
        <div id="circle"></div>
        <h1>半圆</h1>
        <div id="semicircle"></div>
        <h1>扇形</h1>
        <div id="fanShaped"></div>
        <h1>椭圆形</h1>
        <div id="oval"></div>
        <h1>三角</h1>
        <div id="triangle-up" style="float: left;margin-right: 10px;"></div>
        <div id="triangle-down" style="float: left;margin-right: 10px;"></div>
        <div id="triangle-left" style="float: left;margin-right: 10px;"></div>
        <div id="triangle-right" style="float: left;margin-right: 10px;"></div>
            <div id="triangle-topleft" style="float: left;margin-right: 10px;"></div>
            <div id="triangle-topright" style="float: left;margin-right: 10px;"></div>
            <div id="triangle-bottomleft" style="float: left;margin-right: 10px;"></div>
            <div id="triangle-bottomright" style="float: left;margin-right: 10px;"></div>
            <h1 style="clear:both">平开四边形</h1>
            <div id="parallelogram"></div>
            <h1>六角星</h1>
            <div id="star-six"></div>
            <h1>五角星</h1>
            <div id="star-five"></div>
            <h1>心形</h1>
            <div id="heart"></div> 
            <h1>Pac-Man</h1>
            <div id="pac-man"></div>
            <h1>对话泡泡</h1>
            <div id="talkbubble"></div>
            <h1>Point Burst </h1>
            <div id="burst-12"></div>
            <h1>阴阳图</h1>
            <div id="yin-yang"></div>
    </div>

CSS

.demo {
    width: 500px;
    margin: 20px auto;
}

h1 {
    font-size: 16px;
    margin-bottom: 10px;
    clear:both;
}
#square { 
            width: 100px; 
            height: 100px; 
            background: red; 
        }
        #rectangle { 
            width: 200px; 
            height: 100px; 
            background: red; 
        }
        #circle { 
            width: 100px; 
            height: 100px; 
            background: red; 
            -moz-border-radius: 50px; 
            -webkit-border-radius: 50px; 
            border-radius: 50px; 
        }
        #semicircle{ 
            width: 100px; 
            height: 50px; 
            background: red; 
            -moz-border-radius: 100px 100px 0 0; 
            -webkit-border-radius:  100px 100px 0 0; 
            border-radius:  100px 100px 0 0; 
        }
        #fanShaped {
            background: none repeat scroll 0 0 red;
            -webkit-border-radius: 50px 0 0 0;
            -moz-border-radius: 50px 0 0 0;
            border-radius: 50px 0 0 0;
            height: 50px;
            width: 50px;
        }
        #oval { 
            width: 200px; 
            height: 100px; 
            background: red; 
            -moz-border-radius: 100px / 50px; 
            -webkit-border-radius: 100px / 50px; 
            border-radius: 100px / 50px; 
        } 
        #triangle-up { 
            width: 0; 
            height: 0; 
            border: 50px solid red;
            border-color: transparent transparent red;
     } 
        #triangle-down { 
            width: 0; 
            height: 0; 
            border: 50px solid red;
            border-color: red transparent transparent;
     }
        #triangle-left { 
            width: 0; 
            height: 0; 
            border: 50px solid red;
            border-color: transparent red transparent  transparent;
     } 
        #triangle-right { 
            width: 0; 
            height: 0; 
            border: 50px solid red;
      ...