XeNote/pages/playground/index.tsx

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>
</>
)
}