<div x-data="{ openSection: null }" class="bg-gray-50 py-6 flex flex-col items-center justify-center relative overflow-hidden sm:py-12">
<div @click="openSection = (openSection === 1) ? null : 1" class="p-4 bg-blue-100 w-1/2 rounded flex justify-between items-center cursor-pointer">
<div class="flex items-center gap-2">
<svg height="200px" width="200px" version="1.1" id="Icons" class="h-6 w-6 fill-blue-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M29.3,22.8L29.3,22.8l-3.9-4.7C24.8,17.4,24,17,23.1,17H8.9c-0.9,0-1.7,0.4-2.3,1.1l-3.9,4.7C2.2,23.3,2,24,2,24.7V27 c0,1.7,1.3,3,3,3h22c1.7,0,3-1.3,3-3v-2.3C30,24,29.8,23.3,29.3,22.8z M8.2,19.4C8.4,19.1,8.6,19,8.9,19h14.1c0.3,0,0.6,0.1,0.8,0.4 l3,3.6H5.1L8.2,19.4z"></path> <g> <path d="M16.4,1.1c-0.3-0.1-0.6-0.1-0.9,0l-5.9,3L16,6.9l6.4-2.8L16.4,1.1z"></path> <path d="M9,12c0,0.4,0.2,0.7,0.6,0.9l5.4,2.7v-7L9,6V12z"></path> <path d="M17,8.6v7l5.4-2.7c0.3-0.2,0.6-0.5,0.6-0.9V6L17,8.6z"></path> </g> </g></svg>
<h4 class="font-medium text-sm text-blue-500">Build Dynamic Websites</h4>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform" :class="{ 'rotate-180': openSection === 2 }" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</div>
<div x-show="openSection === 1" class="w-1/2 bg-white p-4 mt-4">
<h4 class="text-sm text-slate-400">Explore the world of dynamic web development and create interactive and engaging websites.</h4>
<button class="bg-blue-500 p-2 text-sm text-white font-bold rounded mt-4">Start Web Development</button>
</div>
<div @click="openSection = (openSection === 2) ? null : 2" class="p-4 bg-blue-100 w-1/2 rounded flex justify-between items-center mt-4 cursor-pointer">
<div class="flex items-center gap-2">
<svg viewBox="0 0 24 24" class="h-6 w-6 text-blue-500" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12 3V21M9.99995 4L12 6L14 4M9.99995 20L12 18L14 20M4.23218 7.5L19.8206 16.5M4.11133 9.50885L6.57017 8.85L5.91133 6.39115M18.141 17.6089L17.4821 15.15L19.941 14.4912M19.8205 7.5L4.232 16.5M18.1413 6.39115L17.4825 8.85L19.9413 9.50885M4.11166 14.4911L6.57051 15.15L5.91166 17.6088" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
<h4 class="font-medium text-sm text-blue-500">Master Responsive Design</h4>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform" :class="{ 'rotate-180': openSection === 2 }" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</div>
<div x-show="openSection === 2" class="w-1/2 bg-white p-4 mt-4">
<h4 class="text-sm text-slate-400">Discover the art of creating responsive designs that adapt seamlessly to various screen sizes and devices.</h4>
<button class="bg-blue-500 p-2 text-sm text-white font-bold rounded mt-4">Learn Responsive Design</button>
</div>
</div>
<script src="https://unpkg.com/alpinejs@3.13.3/dist/cdn.min.js" defer></script>