JSFiddle - React, Tailwind, and code Playground

by second9040

HTML

<!DOCTYPE html>

<!--第3課課程practice-->

<!--
教學參考：
http://zh-tw.learnlayout.com/
-->

<html>

<style>
 
    #main1 {
      width: 600px;
      margin: 0 auto; 
      border:solid 5px #CCFF99	;
    }

    #main2 {
      max-width: 600px;
      margin: 0 auto; 
      border:solid 5px #CCFF99	;
    }

    .simple {
      width: 500px;
      margin: 20px auto;
      border:solid 10px #FF44AA	;

    }

    .fancy {
      width: 500px;
      margin: 20px auto;
      padding: 50px;
      border:solid 10px #FF44AA	;
            
    }
    
    .simple_box_sizing{
      width: 500px;
      margin: 20px auto;
      border: solid blue 10px;

      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

  .fancy_box_sizing {
      width: 500px;
      margin: 20px auto;
      padding: 50px;
      border: solid blue 10px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    
    .static {
      position: static;
    
      border: solid #77DDFF	10px;
      margin:5px;
      padding:5px;
    }
    
    .relative1 {
      position: relative;
      border: solid #7744FF	3px;
    }
    .relative2 {
      position: relative;
      top: -5px;
      left: 20px;
      background-color: white;
      width: 500px;
      border: solid #7744FF	3px;
    }
    
    .fixed {
      position: fixed;
      bottom: 100px;
      right: 0;
      width: 250px;
      background-color: white;
      border: solid #FFC8B4	5px;
      font-size:9px;
      color:#FF7744	;
    }

    .relative {
      position: relative;
      width: 600px;
      height: 400px;
      border: solid #CCBBFF	5px;

    }

    .absolute {
       border: solid #CCEEFF	5px; 
       margin:15px;
     }
     
    .absolute_ex {
      position: absolute;
      top: 1320px;
      right: 0;
      width: 300px;
      color: #9F88FF	;
      border: solid #CCBBFF	5px;
    }


/* example1 */

   ...