JSFiddle - React, Tailwind, and code Playground

by wangd933

HTML

<!doctype html>
<html>
  <head></head>
  <style>
    .modal-container {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      display: none;
      background: rgba(0,0,0,0.32);
      align-items: center;
      justify-content: center;
    }
    .modal-container.show {
      display: flex;
    }
    .modal {
      width: 668px;
      height: 608px;
      border-radius: 5px;
      border: 1px solid #ccc;
      background: white;
      overflow: hidden;
    }
    .modal-header {
      height: 50px;
      width: 100%;
      font-size: 16px;
      border-bottom: 2px solid #ccc;
      line-height: 50px;
      position: relative;
    }
    .modal-header > span {
      color: red;
      display: inline-block;
      position: relative;
      width: 80rpx;
    }
    .modal-header > span:after {
      position: absolute;
      content: "";
      bottom: -2px;
      left: 0;
      right: 0;
      border-bottom: 2px solid red;
    }
    .modal-header-title {
      margin-left: 30px;
    }
    .x {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 25px;
      top: 20px;
    }
    .x-1, .x-2 {
      position: absolute;
      width: 10px;
      height: 2px;
      background: #ccc;
      transform: rotate(45deg);
      right: 30px;
      top: 30px;
    }
    .x-2 {
      transform: rotate(-45deg);
    }
    .modal-main, form {
      height: 458px;
      display: flex;
      flex-wrap: wrap;
    }
    .modal-footer {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
    }
    .modal-footer > button {
      height: 32px;
      width: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border-radius: 3px;
      outline: none;
    }
    .modal-footer > .upload {
      color: white;
      background: red;
    }
    .modal-footer > .cancel {
      color: #ccc;
      background: gray;
      margin-left: 24px;
    }
   ...