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">
				
					<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 class="pc-skills_ttl">J</h3><!-- /.pc-skills_ttl...

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%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}

.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;
  -ms-grid-columns: (minmax(26%, 1fr))[auto-fit];
      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;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media screen and (max-width: 599px) {
  .skills-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

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