38 lines
3.2 KiB
TypeScript
38 lines
3.2 KiB
TypeScript
import Head from 'next/head'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>🛝 Playground</title>
|
|
</Head>
|
|
|
|
<div>
|
|
<Head>
|
|
<body className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-600 to-gray-900 " />
|
|
</Head>
|
|
<div className="parent min-h-screen grid grid-cols-23 grid-rows-22 gap-5 p-10 scale-75">
|
|
<div className="shadow-xl rounded-lg [grid-area:1_/_1_/_14_/_6] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent "> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:14_/_1_/_17_/_6] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:1_/_6_/_8_/_12] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:1_/_12_/_8_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:17_/_1_/_21_/_10] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:21_/_1_/_23_/_10] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:17_/_18_/_23_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:12_/_18_/_17_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:7_/_18_/_12_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:1_/_18_/_7_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:8_/_6_/_17_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
<div className="shadow-xl rounded-lg [grid-area:17_/_10_/_23_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
|
|
</div>
|
|
|
|
<div className="p-10 flex gap-4 bg-white">
|
|
<div className="bg-sky-50 transition-all duration-500 hover:w-36 hover:bg-sky-500 w-20 h-20 shadow-lg hover:shadow-sky-300 rounded-full" />
|
|
<div className="bg-red-50 transition-all duration-500 hover:w-36 hover:bg-red-500 w-20 h-20 shadow-lg hover:shadow-red-300 rounded-full" />
|
|
<div className="bg-purple-50 transition-all duration-500 hover:w-36 hover:bg-purple-500 w-20 h-20 shadow-lg hover:shadow-purple-300 rounded-full" />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|