JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      .hbox {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
      
        display: -moz-box;
        -moz-box-orient: horizontal;
      
        display: box;
        box-orient: horizontal;
      
        width: 500px;
        height: 100px;
        background-color: wheat;
        border: 2px solid peru;
      }
      
      .center_box {
        -webkit-box-align: center;
        -webkit-box-pack: center;
      
        -moz-box-align: center;
        -moz-box-pack: center;
      
        box-align: center;
        box-pack: center;
      }
      
      .justified_box {
        -webkit-box-align: center;
        -webkit-box-pack: justify;
      
        -moz-box-align: center;
        -moz-box-pack: justify;
      
        box-align: center;
        box-pack: justify;
      }
      
      .reverse_box {
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        box-direction: reverse;
      }
      
      .child_box {
        width: 100px;
        height: 50px;
        border: 1px solid black;
        font: 16px/50px Arial;
        text-align: center;
      }
      
      .box_group_1 {
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        box-ordinal-group: 1;
      }
      
      .box_group_2 {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
      }
      
      p {
        font: 20px Arial;
      }
    </style>
  </head>
  <body>
    <p>Center Box</p>
    <div class="hbox center_box">
      <div class="child_box">A</div>
      <div class="child_box">B</div>
      <div class="child_box">C</div>
    </div>
    <p>Justified Box</p>
    <div class="hbox justified_box">
      <div class="child_box">A</div>
      <div class="child_box">B</div>
      <div class="child_box">C</div>
    </div>
    <p>Reverse Box</p>
    <div class="hbox reverse_box">
      <div class="child_box">A</div>
     ...