JSFiddle - React, Tailwind, and code Playground

by santhosh lanka

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Horizontal Acordion</title>
	<link href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
		rel="stylesheet" />
	<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
		rel="stylesheet" />
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
	</script>
	<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
	</script>
	<style>
		
		.accordion.width {
			display: flex;
		}
		
		.accordion.width .card {
			flex-direction: row;
			min-width: min-content;
		}
		
		.accordion.width .card .card-header {
			cursor: pointer;
			transform: rotate(180deg);
			writing-mode: vertical-rl;
			background-color: #0F9D58;
			border: 2px solid black;
		}
		
		.card-body {
			width: 100%;
			background-color: ;
		}
		
		.collapsing.width {
			transition: width 0.5s ease;
			height: auto;
			width: 10px;
		}
		
		h1 {
			color: green;
		}
	</style>
</head>

<body>

		<div class="accordion width"
			id="accordionHorizontalExample">

			<!-- Accordion group creating-->
			<div class="card">
				<div class="card-header"
					data-toggle="collapse"
					data-target="#collapseOne">
					Accordion Slide 1
				</div>
				<div id="collapseOne"
					class="collapse show width"
					data-parent="#accordionHorizontalExample">
					<div class="card-body">
						If you like GeeksforGeeks and would like
					to contribute you can also write an article
					using write.geeksforgeeks.org
					</div>
				</div>
			</div>
			<div class="card">
				<div class="card-header"
					data-toggle="collapse"
					data-target="#collapseTwo">
					Accordion Slide 2
				</div>
				<div id="collapseTwo"
					class="collapse width"
					data-parent="#collapseOne">
					<div class="card-body">
						If you like GeeksforGeeks and would like
					to...