JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  <meta property="og:type" content="website">
  <meta property="og:title" content="TAKE's PortFolio">
  <meta property="og:description" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:site_name" content="">
  <meta name="twitter:card" content="@free_worker77">
    <title>P</title>

<!---->
<!-- AOS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!-- Original -->
    <link rel="stylesheet" href="./Top/asset/css/destyle.css">
    <link rel="stylesheet" href="./Top/asset/css/luminous-basic.min.css">
    <link rel="stylesheet" href="./Top/asset/css/style.css">
    <link rel="stylesheet" href="./Top/asset/css/slick.css">
    <link rel="stylesheet" href="/Top/asset/css/slick-theme.css">
<!-- /Original -->
<!-- =========================================================================
Font Awosme
========================================================================= -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
    <i class="fa-solid fa-clover fa-lg"></i>
    <main class=""main>
     <section class="contact" id="contact">
                <div class="container contact-container">
                  <h2 class="contact-ttl">
                    contact
                  </h2><!-- /.c-section-title -->
                  <form action="send.php" method="post" id="js-form" class="form-contact">
                        <label for="name">
                        お名前(必須)
                        <span class="name_alert" ></span>
                        <input type="text" name="name" id="name"><br>
                       ...

CSS

.dm-contact .e-mail-icon {
  display: inline-block;
  margin: 0 15px 80px 0;
  padding: 0;
}

.dm-contact .e-mail-icon > a::before {
  font-size: 10rem;
  height: 60px;
  width: 60px;
  line-height: 60px;
  font-family: "FontAwesome";
  content: "\f0e0";
}

.dm-contact .twitter-icon {
  display: inline-block;
  margin: 0 15px 80px 0;
  padding: 0;
}

.dm-contact .twitter-icon > a::before {
  font-size: 10rem;
  height: 60px;
  width: 60px;
  line-height: 60px;
  font-family: "FontAwesome";
  content: "\f099";
}