<template>

<div class="dark:bg-gray-600 antialiased">
    <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0 py-8">

        <div class="container mx-auto px-4 pb-8">

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="p-2">
                    <div class="flex justify-center items-center p-2 bg-gray-100">
                        <img src="@images/shop_power_supply.jpg" alt="Shop Power Supply" class="h-100">
                    </div>
                    <div class="mt-2 w-full text-sm dark:text-white">
                        <span class="text-2xl md:text-3xl font-bold">Choosing Your First PSU?</span><br />
                        <span class="text-gray-600 dark:text-gray-100 text-lg">Power supply units aren't as glamorous as processors and graphics cards, but they're a critical PC component that you absolutely cannot overlook.</span><br />
                        <div class="mt-8"><a href="#" class="btn-with-triangle text-lg text-black font-bold py-2 px-4 no-underline uppercase">
                            Shop Power Supply
                        </a></div>
                    </div>
                </div>
                <div class="p-2">
                    <div class="flex justify-center items-center p-2 bg-gray-100">
                        <img src="@images/shop_chair.jpg" alt="Shop Chair" class="h-100">
                    </div>
                    <div class="mt-2 w-full text-sm dark:text-white">
                        <span class="text-2xl md:text-3xl font-bold">A New Generation</span><br />
                        <span class="text-gray-600 dark:text-gray-100 text-lg">The quality is equivalent to the super racing chair, wear-resistant and scratch-resistant, not easy to rot.</span><br />
                        <div class="mt-8"><a href="#" class="btn-with-triangle text-lg text-black font-bold py-2 px-4 no-underline uppercase">
                            Shop Gaming Chair
                        </a></div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
</template>    

<style scoped>
.btn-with-triangle {
    background-color: whitepink;
    margin: auto;
    border: black solid 2px; 
    position: relative;
}
.btn-with-triangle::after {
    content: '';
    height: 30px;
    width: 28px;
    position: absolute;
    background-color: white;
    top: 10%;
    right: -16px;
    border-top: black solid 2px;
    border-left: black solid 2px;
    transform: rotate(135deg);
}

.btn-with-triangle:hover ,.btn-with-triangle:hover::after {
    background-color: black;
    color:#fff;
}

</style>