JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<div class="one">
1
</div>
<div class="two">
2
</div>
<span class="big">大文字</span><span class="small">小文字</span>
<input type="text" value="123">
<button>
提交
</button>
<textarea>123</textarea>

CSS

* {
  margin: 0;
  padding: 0;
}

em,
i {
  font-style: normal;
}

li {
  list-style: none;
}

a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #c81623;
}

input {
  outline: none;
}

button {
  border: 0;
  cursor: pointer;
}
textarea{
  resize:none;
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  color: #666;
}

.wrap {
  width: 400px;
  margin: 10px auto;
}

.w {
  width: 1200px;
  margin: 0 auto;
}

.clearfix::after {
  visibility: hidden;
  clear: both;
  display: block;
  content: "";
  height: 0;
}

.clearfix {
  *zoom: 1;
}

div{
  width:100px;
  height:100px;
}
.one{
visibility:hidden;
  background-color:pink;
}
.two{
  background-color:deeppink;
}
.big{
  display:inline-block;
  vertical-align:middle;
  width:100px;
  height:100px;
  border:1px solid;
  border-radius:100%;
  color:red;
  font-size:24px;
  font-weight:700;
  text-shadow:2px 2px 2px rgba(0,0,0,.3);
}
.small{
   display:inline-block;
  vertical-align:middle;
}