JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
	<section class="skills js-scroll" id="skills">
		<div class="skills-inner">
			<h2 class="skills-ttl ttl-adjust">Skills</h2><!-- /.about-ttl -->
			<div class="skills-container">
				<div class="html-code" id="js-front-code">
					<ul class="skills_list" role="list">
						<li class="skills_item pc-skills pc-skills_front passive">
							<h3 class="pc-skills_ttl">HTML5</h3><!-- /.pc-skills_ttl -->
							<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
							<a href=""></a>
						</li><!-- /.skills_item -->
						<!--2-->
						<li class="skills_item pc-skills pc-skills_back active">
							<h3 class="pc-skills_ttl">HTML5</h3><!-- /.pc-skills_ttl -->
							<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
							<p class="skills-desc_back">…</p><!-- /.skills-desc -->
							<a href=""></a>
						</li><!-- /.skills_item -->
					</ul><!-- /.skills_list -->
					<ul class="skills_list" role="list">
						<li class="skills_item pc-skills pc-skills_front passive">
							<h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
							<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
							<a href=""></a>
						</li><!-- /.skills_item -->
						<!--2-->
						<li class="skills_item pc-skills pc-skills_back active">
							<h3 class="pc-skills_ttl">CSS</h3><!-- /.pc-skills_ttl -->
							<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
							<p class="skills-desc_back">…</p><!-- /.skills-desc -->
							<a href=""></a>
						</li><!-- /.skills_item -->
					</ul><!-- /.skills_list -->
					<ul class="skills_list" role="list">
						<li class="skills_item pc-skills pc-skills_front passive">
							<h3...

CSS

.skills-inner {
  margin: 0 auto;
  width: 1280px;
  padding: 0px 15px;
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .skills-inner {
    padding: 0px 5%;
  }
}

@media screen and (max-width: 599px) {
  .skills-inner {
    padding: 0px 5%;
  }
}

.skills-ttl {
  line-height: 3;
  position: relative;
  z-index: 1;
  text-transform: capitalize;
  font-size: 3.0rem;
}

.skills-ttl::first-letter {
  color: #c42d2d;
}

.skills-ttl::after {
  content: "スキル";
  width: 10%;
  height: 10%;
  font-size: 1.8rem;
  padding-top: 20px;
  padding-left: 20px;
}

.skills-container {
  display: -ms-grid;
  display: grid;

      grid-template-columns: repeat(auto-fit, minmax(26%, 1fr));
  gap: 2%;
  margin-bottom: 10%;
  max-width: 95vw;
}

@media screen and (max-width: 1025px) {
  .skills-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

            flex-wrap: wrap;
 
            flex-basis: auto;
   
            align-items: center;
  }
}

@media screen and (max-width: 599px) {
  .skills-container {
 
    display: flex;
            flex-wrap: wrap;
  }
}

.skills_list[role="list"] {
  position: relative;
  width: max(26%, 320px);

          box-sizing: border-box;
}

@media screen and (max-width: 700px) {
  .skills_list[role="list"]:nth-child(n) {
    width: max(20%, 260px);
  }
}

@media screen and (max-width: 1025px) {
  .skills_list {
    margin-right: 30px;
  }
}

.skills_item {
          transform-style: preserve-3d;
  transition: transform 10s;

  display: flex;
          flex-direction: column;
  width: 100%;
  height: 80%;
  margin-top: 60px;
  transform-style: preserve-3d;

  transition: transform 1s, opacity 0.5s;

  background-color: #fff;
}

.skills_item:nth-of-type(2n) {
  margin: 10px 1%;
}

.skills_item .skills_img img {
  width: 40%;
}

.skills_item > a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-indent: 100%;

  white-space: nowrap;

 ...