JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
     <link rel="stylesheet" href="/asset/css/destyle.css">
 <link rel="stylesheet" href="/asset/css/style.css">
</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=""...

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 {
   ...

JavaScript

$(function () {
  $(window).scroll(function () {
    var fix = $(".skills_list");
    var fixskill = fix.offset().top;
    var adjust = 60;   // ユーザー視点で、デバイス中央配置

    if ($(window).scrollTop() >= fixskill - adjust) {
      // fix.addClass("skills_list.pc-skills_back");
      $(".pc-skills_front").css({
        "z-index": "-1",
        transform: "rotateY(-180deg)",
      });
      $(".pc-skills_back").css({
        "z-index": "1",
        transform: "rotateY(0deg)",
      });
      $(".pc-skills_back").addClass('_active');
    } else {
      // fix.removeClass("skills_list.pc-skills_back");
      $(".pc-skills_back").css({
        "z-index": "-1",
        transform: "rotateY(-180deg)",
      });
      $(".pc-skills_front").css({
        "z-index": "1",
        transform: "rotateY(0deg)",
      });
     
    }
  });

  //表と裏で高さを揃える。比較してから大きい方を入れたほうがいいかと。
  $(window).on("load resize", function () {
    var h = $(".pc-skills_back").outerHeight(true);
    $(".pc-skills_front").css("height", h + "px");
  });
});