JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
    
</head>
<body>
	<div class="skills-inner">
		<h2 class="skills-tt 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">H</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">H</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">C</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">JQuery</h3><!-- /.pc-skills_ttl -->
					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
					<a href=""></a>
				</li><!-- /.skills_item...

CSS

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

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .skills-inner {
    max-width: initial;
    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-ttl {
  line-height: 3;
  position: relative;
  z-index: 1;
  text-transform: capitalize;
  font-size: 3.0rem;
}

.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%;
}

@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;
    max-width: 900px;
  }
}

@media screen and (max-width: 700px) {
  .skills-container {
    -webkit-box-pack: initial;
    -webkit-justify-content: initial;
        -ms-flex-pack: initial;
            justify-content: initial;
  }
}

.skills_list[role="list"] {
  position: relative;
  width: max(26%, 320px);
  -webkit-box-sizing: border-box;
          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 {
   ...