JSFiddle - React, Tailwind, and code Playground

by sphenisc

HTML

<section class="index_sample">
		<div class="inner">
			<ul>
				<li>
					<h3>サンプルタイトル1</h3>
					<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</p>
				</li>
				<li>
					<h3>サンプルタイトル2</h3>
					<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</p>
				</li>
				<li>
					<h3>サンプルタイトル3</h3>
					<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</p>
				</li>
				<li>
					<h3>サンプルタイトル4</h3>
					<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</p>
				</li>
				<li>
					<h3>サンプルタイトル5</h3>
					<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</p>
				</li>
				<li>
					<h3>サンプルタイトル6</h3>
					<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</p>
				</li>
			</ul>
		</div>
	</section>

SCSS

/* SCSS メディアクエリ */
@mixin mq_pc {
	@media (min-width: 961px) {
		@content;
	}
}
@mixin mq_tab {
	@media (min-width: 768px) and (max-width: 960px) {
		@content;
	}
}
@mixin mq_sp {
	@media (max-width: 767px) {
		@content;
	}
}

/* フレックスボックス */
@mixin flex(
	$display: flex,
	$wrap: nowrap,
	$justify_c: space-between,
	$align_i: stretch,
	$align_c: stretch
) {
	display: -webkit- + $display;
	display: $display;
	-webkit-flex-wrap: $wrap;
	flex-wrap: $wrap;
	-webkit-justify-content: $justify_c;
	justify-content: $justify_c;
	-webkit-align-items: $align_i;
	align-items: $align_i;
	-webkit-align-content: $align_c;
	align-content: $align_c;
}

/* フォントサイズをremに変換する */
@function fz($size) {
	@return ($size/16) + rem;
}

:root {
  box-sizing: border-box;
	@include mq_sp {
		font-size: 4.26666666667vw !important;
	}
}
*,
::before,
::after {
	box-sizing: inherit;
}
html,
body {
	font-size: fz(16);
	color: #333;

	@include mq_sp {
		font-size: fz(16);
	}
}

.inner {
	width: 100%;
	position: relative;

	@include mq_pc {
		max-width: calc(1200px + 20px * 2);
		padding: 0 20px;
		margin: 0 auto;
	}
	@include mq_tab {
		padding: 0 4vw;
	}
	@include mq_sp {
		padding: 0 3.2%;
	}
}

.index_sample {
	padding: 1rem 0 0;
	ul {
		@include flex(flex, wrap, space-between, flex-start, flex-start);
		@include mq_sp {
			display: block;
		}
		li {
			width: 32%;
			padding: 1rem;
			border: 1px solid #000;
			margin-bottom: 1rem;
			@include mq_tab {
				width: 48%;
			}
			@include mq_sp {
				width: 100%;
			}
			h3 {
				font-size: fz(20);
				color: #339933;
				line-height: 2;
				text-align: center;
			}
			p {
				line-height: 2;
			}
		}
	}
}