hishamdalal/gist:75e97d1fa64d135279090e95ce94b972

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive tabs with pure CSS</title>
    <style>
        .responsive-tabs {
            display: grid;
            grid-template-columns: 1fr 4fr;
            position: relative;
        }
        .responsive-tabs .contents {
            visibility: hidden;
        }
        .responsive-tabs .title:focus-within + .contents {
            visibility: visible;
        }


        @media screen and (max-width: 767px) {
            .responsive-tabs {
                display: flex;
                flex-direction: column;
            }
            .responsive-tabs .contents {
                display: none;
            }
            .responsive-tabs .title:focus-within + .contents {
                display: block;
            }
        }

        /************ Styling ************/

        /* Global */

        *, ::after, ::before {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        html {
            font-family: sans-serif;
            line-height: 1.15;
            font-size: .9rem;
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent;
        }
        a {
            text-decoration: none;
        }
        a:visited {
            color: darkblue;
        }


        /* Main Container */
        .responsive-tabs {
            margin: 2rem;
            padding: 2rem;
            background-color: #ccc;
            row-gap: 0.2rem;
        }

        /* Title */
        .responsive-tabs .title {
            display: grid;
            padding: 0 1rem;
            margin: 0;
            position: relative;
        }

        .responsive-tabs .title a {
            display: flex;
            justify-items: center;
            align-items: center;
        }


        /* Contents */
        .responsive-tabs .contents {
            padding: 1rem;

        }


        @media screen and (max-width: 767px) {
            .responsive-tabs {
                row-gap: 0rem;
            }
            .responsive-tabs .title{
                padding: 1rem;
            }

        }


        /* Colors and Animate */

               .responsive-tabs .title:hover {
            background-color:#d9d9d9;
        }


        .responsive-tabs .title:focus-within,
        .responsive-tabs .title:focus-within + .contents {
            background: white;
        }

        .responsive-tabs .title:focus-within:after {
            display: block;
            content: "";
            position: absolute;
            right: 0;
            background: darkgray;
        }

        @media screen and (min-width: 767px) {
            .responsive-tabs .title:focus-within:after {
                width: 2px;
                height: 70%;
                top: 15%;
            }
        }

        @media screen and (max-width: 767px) {
            .responsive-tabs .title:focus-within:after {
                width: 100%;
                height: 2px;
                top: 0;
            }
        }


    </style>
</head>
<body>

    <div class="responsive-tabs" id="responsive-tabs-1">
        <h3 class="title"><a href="#tab-1">Title 1</a></h3>
        <div class="contents">
            <div class="content-1">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nihil totam ipsa adipisci explicabo eius dolorum vel temporibus libero, quam deserunt incidunt magni reiciendis rem, dolor architecto dolore nemo nulla.
            </div>
        </div>

        <h3 class="title"><a href="#tab-2">Title 2</a></h3>
        <div class="contents">
            <div class="content-2">
                consectetur adipisicing elit. Officia nihil totam ipsa adipisci explicabo eius dolorum vel temporibus libero, quam deserunt incidunt magni reiciendis rem, dolor architecto dolore nemo nulla.
            </div>
        </div>

        <h3 class="title"><a href="#tab-3">Title 3</a></h3>
        <div class="contents">
            <div class="content-3">
                Officia nihil totam ipsa adipisci explicabo eius dolorum vel temporibus libero, quam deserunt incidunt magni reiciendis rem, dolor architecto dolore nemo nulla.
            </div>
        </div>

    </div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Responsive tabs with pure CSS</title>
	<style>
	.responsive-tabs {
	display: grid;
	grid-template-columns: 1fr 4fr;
	position: relative;
	}
	.responsive-tabs .contents {
	visibility: hidden;
	}
	.responsive-tabs .title:focus-within + .contents {
	visibility: visible;
	}


	@media screen and (max-width: 767px) {
	.responsive-tabs {
	display: flex;
	flex-direction: column;
	}
	.responsive-tabs .contents {
	display: none;
	}
	.responsive-tabs .title:focus-within + .contents {
	display: block;
	}
	}

	/********** Styling **********/

	/* Global */

	*, ::after, ::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
	html {
	font-family: sans-serif;
	line-height: 1.15;
	font-size: .9rem;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	}
	a {
	text-decoration: none;
	}
	a:visited {
	color: darkblue;
	}


	/* Main Container */
	.responsive-tabs {
	margin: 2rem;
	padding: 2rem;
	background-color: #ccc;
	row-gap: 0.2rem;
	}

	/* Title */
	.responsive-tabs .title {
	display: grid;
	padding: 0 1rem;
	margin: 0;
	position: relative;
	}

	.responsive-tabs .title a {
	display: flex;
	justify-items: center;
	align-items: center;
	}



	/* Contents */
	.responsive-tabs .contents {
	padding: 1rem;

	}



	@media screen and (max-width: 767px) {
	.responsive-tabs {
	row-gap: 0rem;
	}
	.responsive-tabs .title{
	padding: 1rem;
	}

	}


	/* Colors and Animate */

	.responsive-tabs .title:hover {
	background-color:#d9d9d9;
	}


	.responsive-tabs .title:focus-within,
	.responsive-tabs .title:focus-within + .contents {
	background: white;
	}

	.responsive-tabs .title:focus-within:after {
	display: block;
	content: "";
	position: absolute;
	right: 0;
	background: darkgray;
	}

	@media screen and (min-width: 767px) {
	.responsive-tabs .title:focus-within:after {
	width: 2px;
	height: 70%;
	top: 15%;
	}
	}

	@media screen and (max-width: 767px) {
	.responsive-tabs .title:focus-within:after {
	width: 100%;
	height: 2px;
	top: 0;
	}
	}


	</style>
	</head>
	<body>

	<div class="responsive-tabs" id="responsive-tabs-1">
	<h3 class="title"><a href="#tab-1">Title 1</a></h3>
	<div class="contents">
	<div class="content-1">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nihil totam ipsa adipisci explicabo eius dolorum vel temporibus libero, quam deserunt incidunt magni reiciendis rem, dolor architecto dolore nemo nulla.
	</div>
	</div>

	<h3 class="title"><a href="#tab-2">Title 2</a></h3>
	<div class="contents">
	<div class="content-2">
	consectetur adipisicing elit. Officia nihil totam ipsa adipisci explicabo eius dolorum vel temporibus libero, quam deserunt incidunt magni reiciendis rem, dolor architecto dolore nemo nulla.
	</div>
	</div>

	<h3 class="title"><a href="#tab-3">Title 3</a></h3>
	<div class="contents">
	<div class="content-3">
	Officia nihil totam ipsa adipisci explicabo eius dolorum vel temporibus libero, quam deserunt incidunt magni reiciendis rem, dolor architecto dolore nemo nulla.
	</div>
	</div>

	</div>

	</body>
	</html>