A
Anonymous

Responsive Container - Copy this React, Tailwind Component to your project

* { margin: 0; padding: 0; box sizing: border box; font family: "Urbanist", sans serif; } html { font size: 62.5%; color: #fff; } body { width: 100%; height: 100vh; display: flex; justify content: center; align items: center; background color: #1b1b1d; } .container { background color: #fff; text align: center; padding: 2.4rem 6.4rem; color: #000; box shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); } .api_body { font size: 1.7rem; letter spacing: 0.1rem; margin top: 1rem; margin bottom: 2rem; } button { height: 5rem; background color: #f5ee62; padding: 0.6rem 2.4rem; border radius: 10rem; margin right: 3.6rem; cursor: pointer; transition: all 0.3s linear; border: none; } button:hover { box shadow: inset 0 0 0 0.2rem #f5ee62; background color: transparent; color: #f5ee62; } h1 { font size: 2.6rem; } hr { margin bottom: 3.2rem; } p, li, button { font size: 1.7rem; letter spacing: 0.1rem; line height: 1.6; }Make it responsive for mobiles, tablets, ipads, iphones etc every device except desktop and laptop

Prompt
Component Preview

About

ResponsiveContainer - A mobile-friendly design with centered layout, padding, and shadows, professionally built with React and Tailwind. Copy component code!

Share

Last updated 1 month ago