JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="wrap">

  <header>
    <h1 id="reflect"><a href="http://jsdo.it/is178/eZBb/fullscreen" target="_parent">HTML5 & CSS3 DEMO</a></h1>
  <nav id="home">
    <ul>
      <li id="on">Home</li>
      <li><a href="#menu1">menu</a></li>
      <li><a href="#menu2">menu</a></li>
      <li><a href="#menu3">menu</a></li>
      <li><a href="#menu4">menu</a></li>
    </ul>
  </nav>
  </header>
  
  <div id="home" class="content">
    <h2>CSS3だけでデザイン</h2>
    <p>今更な感じのネタですが、JavaScriptと画像は一切使わずにHTML5とCSS3で１ページ作ってみました。<br>
    継ぎ足し継ぎ足しで作ってその後直してないのでコード汚いです。後で書き直したい。でもどのみちCSS3であれこれしているだけなのでHTML4でも問題ありません。</p>
    <p>2010年7月16日現在SafariとChromeのみ動作確認。</p>

    <div id="banner">Banner</div>
  
    <h2>更新予定</h2>
    <ul>
      <li>コードの整形</li>
      <li>Webフォント使用</li>
      <li>Firefox対応</li>
      <li>Opera対応</li>
    </ul>
  
  </div>
  
  <div id="menu1" class="content">
    <h1>ページ１</h1>
    <div id="badge"><a href="#home">Home</a></div> 
    <h1 id="reflect_zoom">HTML5 & CSS3 DEMO</h1>  
  </div>

  <div id="menu2" class="content">
    <h1>ページ２</h1>
    <div id="badge"><a href="#home">Home</a></div> 
    <h1 id="reflect_zoom">HTML5 & CSS3 DEMO</h1>  
  </div>

  <div id="menu3" class="content">
    <h1>ページ３</h1>
    <div id="badge"><a href="#home">Home</a></div> 
    <h1 id="reflect_zoom">HTML5 & CSS3 DEMO</h1>  
  </div>

  <div id="menu4" class="content">
    <h1>ページ４</h1>
    <div id="badge"><a href="#home">Home</a></div> 
    <h1 id="reflect_zoom">HTML5 & CSS3 DEMO</h1>  
  </div>

</div>

CSS

*{margin:0; padding:0;}

body{
  background: -webkit-gradient(linear, left top, left bottom, from(#004466),to( #00aaee)) no-repeat;
  background: -moz-linear-gradient(-90deg, #004466, #00aaee) no-repeat;
}

#wrap{
  width:960px;
  margin:0px auto;
}

h1#reflect{
  height:100px;
  -webkit-animation-name: 'anime1';
  -webkit-animation-duration: 0.1s;
  -webkit-animation-timing-function: ease;
  color:#fff;
  font-size:80px;
  text-align:center;
  -webkit-box-reflect:
  below -10px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),
  color-stop(0.4, rgba(0,0,0,0)),
  to(rgba(0,0,0,0.2)));
}

@-webkit-keyframes 'anime1' {
0% {font-size:48px;}
100% {font-size:80px;}
}

h1#reflect a{
  color:#fff;
  text-decoration:none;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-in-out;
}

h1#reflect a:hover{
  color:orange;
}

nav{
margin:70px 0 0 0;
}

nav ul li{
  list-style:none;
}

nav ul li#on{
  float:left;
  width:192px;
  height:30px;
  padding:10px 0;
  font-size:18px;
  text-align:center;
  color:#fff;
  background:none;
}
nav ul li a{
  float:left;
  width:192px;
  height:30px;
  padding:10px 0;
  font-size:18px;
  text-align:center;
  text-decoration:none;
  color:#ccc;
  background: rgba(0,0,0,0.5);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-in-out;
}


nav ul li a:hover{
  color:orange;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)));
  height:40px;
}

.content{
  position:relative;
  margin:150px auto;
  padding:20px;
  color:#fff;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.3)));
  -webkit-border-radius:   20px;
}

.content p{
  padding:20px 0;
}

.content ul{
  margin:20px;
}

h1#reflect_zoom{
  color:#000;
  font-size:48px;
  text-align:center;
  -webkit-transition-propaty: all;
  -webkit-transition-duration: 0.3s;
 ...