Tailwind CSS Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #601

Tailwind CSS

Solstice

<section class="overflow-hidden py-12 bg-white">
  <div class="container mx-auto px-4">
    <div class="bg-purple-900 rounded-2xl pt-4 px-4">
      <div class="bg-white rounded-xl p-2 inline-flex items-center gap-3 flex-wrap mb-18">
        <div class="py-1 px-2 rounded-lg bg-orange-50 flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.33337 7.99998C1.33337 4.31793 4.31799 1.33331 8.00004 1.33331C11.6821 1.33331 14.6667 4.31793 14.6667 7.99998C14.6667 11.682 11.6821 14.6666 8.00004 14.6666C4.31799 14.6666 1.33337 11.682 1.33337 7.99998ZM10.4684 6.75964C10.5094 6.70497 10.5391 6.64266 10.5557 6.57635C10.5723 6.51005 10.5755 6.4411 10.5651 6.37356C10.5546 6.30601 10.5308 6.24123 10.495 6.18302C10.4592 6.12481 10.4121 6.07436 10.3565 6.03461C10.3009 5.99487 10.2379 5.96664 10.1712 5.95159C10.1045 5.93654 10.0355 5.93496 9.96823 5.94696C9.90094 5.95896 9.83673 5.98429 9.77938 6.02146C9.72202 6.05863 9.67267 6.10688 9.63423 6.1634L7.42158 9.26083L6.31115 8.15041C6.21394 8.05982 6.08536 8.01051 5.9525 8.01285C5.81965 8.0152 5.69289 8.06902 5.59893 8.16297C5.50497 8.25693 5.45115 8.38369 5.44881 8.51655C5.44647 8.6494 5.49578 8.77798 5.58637 8.87519L7.12483 10.4137C7.17747 10.4663 7.24093 10.5068 7.3108 10.5324C7.38067 10.558 7.45528 10.5681 7.52945 10.562C7.60362 10.5559 7.67557 10.5337 7.7403 10.497C7.80503 10.4603 7.861 10.4099 7.90431 10.3494L10.4684 6.75964Z" fill="#FF7100"></path>
          </svg>
          <span class="text-orange-500 text-xs font-medium">Tips</span>
        </div>
        <h2 class="text-sm font-medium">Customize your room to enhance your focus.</h2>
      </div>
      <div class="mx-auto bg-white rounded-t-2xl px-3 pt-3 w-full md:w-3/4">
        <div class="flex items-center justify-between flex-wrap gap-4 mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <rect width="32" height="32" rx="8" fill="#FF7100"></rect>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
          </svg>
          <div class="flex items-center gap-2">
            <h2 class="font-medium">Study Session</h2>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M8 11.5666C8.60015 11.5666 9.08666 11.0801 9.08666 10.48C9.08666 9.87983 8.60015 9.39331 8 9.39331C7.39985 9.39331 6.91333 9.87983 6.91333 10.48C6.91333 11.0801 7.39985 11.5666 8 11.5666Z" fill="#B8B8B8"></path>
              <path d="M11.2534 6.79998H11.7289L12.1247 6.84945C12.985 6.95699 13.4426 7.21317 13.7161 7.60689C14.0112 8.03173 14.1667 8.71786 14.1667 9.85998V11.1C14.1667 12.4491 13.9529 13.1567 13.5548 13.5548C13.1568 13.9528 12.4491 14.1666 11.1 14.1666H4.90004C3.55097 14.1666 2.8433 13.9528 2.44526 13.5548C2.04722 13.1567 1.83337 12.4491 1.83337 11.1V9.85998C1.83337 8.71786 1.98893 8.03173 2.28403 7.60689C2.55751 7.21317 3.01507 6.95699 3.87539 6.84945L4.31337 6.7947V6.79331H4.40004V6.79998H4.90004H11.1H11.1004H11.1007H11.101H11.1013H11.1016H11.1019H11.1022H11.1025H11.1028H11.1032H11.1035H11.1038H11.1041H11.1044H11.1047H11.105H11.1053H11.1056H11.106H11.1063H11.1066H11.1069H11.1072H11.1075H11.1078H11.1081H11.1084H11.1087H11.109H11.1093H11.1097H11.11H11.1103H11.1106H11.1109H11.1112H11.1115H11.1118H11.1121H11.1124H11.1127H11.113H11.1133H11.1137H11.114H11.1143H11.1146H11.1149H11.1152H11.1155H11.1158H11.1161H11.1164H11.1167H11.117H11.1173H11.1176H11.1179H11.1182H11.1185H11.1188H11.1191H11.1194H11.1198H11.1201H11.1204H11.1207H11.121H11.1213H11.1216H11.1219H11.1222H11.1225H11.1228H11.1231H11.1234H11.1237H11.124H11.1243H11.1246H11.1249H11.1252H11.1255H11.1258H11.1261H11.1264H11.1267H11.127H11.1273H11.1276H11.1279H11.1282H11.1285H11.1288H11.1291H11.1294H11.1297H11.13H11.1303H11.1306H11.1309H11.1312H11.1315H11.1318H11.1321H11.1324H11.1327H11.133H11.1333H11.1336H11.1339H11.1342H11.1345H11.1348H11.1351H11.1354H11.1357H11.136H11.1363H11.1366H11.1369H11.1372H11.1375H11.1378H11.1381H11.1384H11.1387H11.139H11.1393H11.1396H11.1399H11.1402H11.1405H11.1408H11.1411H11.1414H11.1417H11.142H11.1423H11.1426H11.1429H11.1432H11.1435H11.1438H11.1441H11.1443H11.1446H11.1449H11.1452H11.1455H11.1458H11.1461H11.1464H11.1467H11.147H11.1473H11.1476H11.1479H11.1482H11.1485H11.1488H11.1491H11.1494H11.1497H11.15H11.1503H11.1506H11.1509H11.1512H11.1514H11.1517H11.152H11.1523H11.1526H11.1529H11.1532H11.1535H11.1538H11.1541H11.1544H11.1547H11.155H11.1553H11.1556H11.1559H11.1562H11.1565H11.1568H11.157H11.1573H11.1576H11.1579H11.1582H11.1585H11.1588H11.1591H11.1594H11.1597H11.16H11.1603H11.1606H11.1609H11.1612H11.1615H11.1618H11.162H11.1623H11.1626H11.1629H11.1632H11.1635H11.1638H11.1641H11.1644H11.1647H11.165H11.1653H11.1656H11.1659H11.1662H11.1664H11.1667H11.167H11.1673H11.1676H11.1679H11.1682H11.1685H11.1688H11.1691H11.1694H11.1697H11.17H11.1703H11.1706H11.1708H11.1711H11.1714H11.1717H11.172H11.1723H11.1726H11.1729H11.1732H11.1735H11.1738H11.1741H11.1744H11.1747H11.1749H11.1752H11.1755H11.1758H11.1761H11.1764H11.1767H11.177H11.1773H11.1776H11.1779H11.1782H11.1785H11.1788H11.1791H11.1793H11.1796H11.1799H11.1802H11.1805H11.1808H11.1811H11.1814H11.1817H11.182H11.1823H11.1826H11.1829H11.1832H11.1834H11.1837H11.184H11.1843H11.1846H11.1849H11.1852H11.1855H11.1858H11.1861H11.1864H11.1867H11.187H11.1873H11.1876H11.1878H11.1881H11.1884H11.1887H11.189H11.1893H11.1896H11.1899H11.1902H11.1905H11.1908H11.1911H11.1914H11.1917H11.192H11.1922H11.1925H11.1928H11.1931H11.1934H11.1937H11.194H11.1943H11.1946H11.1949H11.1952H11.1955H11.1958H11.1961H11.1964H11.1967H11.197H11.1972H11.1975H11.1978H11.1981H11.1984H11.1987H11.199H11.1993H11.1996H11.1999H11.2002H11.2005H11.2008H11.2011H11.2014H11.2017H11.202H11.2023H11.2026H11.2029H11.2031H11.2034H11.2037H11.204H11.2043H11.2046H11.2049H11.2052H11.2055H11.2058H11.2061H11.2064H11.2067H11.207H11.2073H11.2076H11.2079H11.2082H11.2085H11.2088H11.2091H11.2094H11.2097H11.21H11.2103H11.2106H11.2108H11.2111H11.2114H11.2117H11.212H11.2123H11.2126H11.2129H11.2132H11.2135H11.2138H11.2141H11.2144H11.2147H11.215H11.2153H11.2156H11.2159H11.2162H11.2165H11.2168H11.2171H11.2174H11.2177H11.218H11.2183H11.2186H11.2189H11.2192H11.2195H11.2198H11.2201H11.2204H11.2207H11.221H11.2213H11.2216H11.2219H11.2222H11.2225H11.2228H11.2231H11.2234H11.2237H11.224H11.2243H11.2246H11.2249H11.2252H11.2255H11.2258H11.2261H11.2264H11.2267H11.227H11.2273H11.2276H11.2279H11.2282H11.2285H11.2288H11.2291H11.2294H11.2297H11.23H11.2303H11.2306H11.2309H11.2312H11.2315H11.2318H11.2321H11.2324H11.2327H11.2331H11.2334H11.2337H11.234H11.2343H11.2346H11.2349H11.2352H11.2355H11.2358H11.2361H11.2364H11.2367H11.237H11.2373H11.2376H11.2379H11.2382H11.2385H11.2388H11.2392H11.2395H11.2398H11.2401H11.2404H11.2407H11.241H11.2413H11.2416H11.2419H11.2422H11.2425H11.2428H11.2431H11.2434H11.2438H11.2441H11.2444H11.2447H11.245H11.2453H11.2456H11.2459H11.2462H11.2465H11.2468H11.2472H11.2475H11.2478H11.2481H11.2484H11.2487H11.249H11.2493H11.2496H11.2499H11.2503H11.2506H11.2509H11.2512H11.2515H11.2518H11.2521H11.2524H11.2527H11.2531H11.2534ZM5.48671 10.48C5.48671 11.8617 6.60949 12.9933 8.00004 12.9933C9.38952 12.9933 10.5134 11.8695 10.5134 10.48C10.5134 9.09717 9.38285 7.96665 8.00004 7.96665C6.61831 7.96665 5.48671 9.08943 5.48671 10.48Z" fill="#B8B8B8" stroke="#B8B8B8"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Utilities Component Generator

Tailwind Component #602

Tailwind CSS

Solstice

<section class="bg-purple-900 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative mb-32">
      <div class="hidden lg:block absolute top-0 left-12">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
          <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_243_15182)" stroke="#6F0B45"></path>
          <defs><linearGradient id="paint0_linear_243_15182" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#6F0B45"><stop offset="1" stop-color="#6F0B45" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="hidden lg:block absolute top-0 right-12">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
          <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_243_15181)" stroke="#6F0B45"></path>
          <defs><linearGradient id="paint0_linear_243_15181" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#6F0B45"><stop offset="1" stop-color="#6F0B45" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="relative z-10">
        <h1 class="text-white text-center text-5xl lg:text-7xl font-bold font-heading max-w-lg lg:max-w-3xl mx-auto pt-14 pb-32">On a mission to make learning fun</h1>
        <div class="border border-purple-700 bg-purple-900 rounded-3xl flex flex-wrap">
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="md:border-r border-purple-700 px-12">
              <p class="text-purple-200 mb-2 text-center">Founded</p>
              <h2 class="text-4xl lg:text-5xl font-semibold text-white text-center">2023</h2>
            </div>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI About Component Generator

Tailwind Component #603

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="relative w-full max-w-xl mx-auto" style="height:600px;">
          <div class="hidden md:block lg:hidden xl:block absolute inset-0 rounded-full bg-purple-800"></div>
          <div class="hidden sm:block absolute rounded-full left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-700" style="width:450px;height:450px;"></div>
          <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full sm:w-96 h-96">
            <div class="bg-white rounded-2xl pl-4 h-full flex flex-col">
              <div class="py-4">
                <div class="relative">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <rect width="32" height="32" rx="8" fill="#FF7100"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
                  </svg>
                  <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <div class="flex items-center gap-2">
                      <h2 class="font-medium whitespace-nowrap">Study Session</h2>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8 11.5667C8.60015 11.5667 9.08666 11.0802 9.08666 10.48C9.08666 9.87986 8.60015 9.39334 8 9.39334C7.39985 9.39334 6.91333 9.87986 6.91333 10.48C6.91333 11.0802 7.39985 11.5667 8 11.5667Z" fill="#B8B8B8"></path>
                        <path d="M11.2534 6.80001H11.7289L12.1247 6.84948C12.985 6.95702 13.4426 7.2132 13.7161 7.60692C14.0112 8.03176 14.1667 8.71789 14.1667 9.86001V11.1C14.1667 12.4491 13.9529 13.1568 13.5548 13.5548C13.1568 13.9528 12.4491 14.1667 11.1 14.1667H4.90004C3.55097 14.1667 2.8433 13.9528 2.44526 13.5548C2.04722 13.1568 1.83337 12.4491 1.83337 11.1V9.86001C1.83337 8.71789 1.98893 8.03176 2.28403 7.60692C2.55751 7.2132 3.01507 6.95702 3.87539 6.84948L4.31337 6.79473V6.79334H4.40004V6.80001H4.90004H11.1H11.1004H11.1007H11.101H11.1013H11.1016H11.1019H11.1022H11.1025H11.1028H11.1032H11.1035H11.1038H11.1041H11.1044H11.1047H11.105H11.1053H11.1056H11.106H11.1063H11.1066H11.1069H11.1072H11.1075H11.1078H11.1081H11.1084H11.1087H11.109H11.1093H11.1097H11.11H11.1103H11.1106H11.1109H11.1112H11.1115H11.1118H11.1121H11.1124H11.1127H11.113H11.1133H11.1137H11.114H11.1143H11.1146H11.1149H11.1152H11.1155H11.1158H11.1161H11.1164H11.1167H11.117H11.1173H11.1176H11.1179H11.1182H11.1185H11.1188H11.1191H11.1194H11.1198H11.1201H11.1204H11.1207H11.121H11.1213H11.1216H11.1219H11.1222H11.1225H11.1228H11.1231H11.1234H11.1237H11.124H11.1243H11.1246H11.1249H11.1252H11.1255H11.1258H11.1261H11.1264H11.1267H11.127H11.1273H11.1276H11.1279H11.1282H11.1285H11.1288H11.1291H11.1294H11.1297H11.13H11.1303H11.1306H11.1309H11.1312H11.1315H11.1318H11.1321H11.1324H11.1327H11.133H11.1333H11.1336H11.1339H11.1342H11.1345H11.1348H11.1351H11.1354H11.1357H11.136H11.1363H11.1366H11.1369H11.1372H11.1375H11.1378H11.1381H11.1384H11.1387H11.139H11.1393H11.1396H11.1399H11.1402H11.1405H11.1408H11.1411H11.1414H11.1417H11.142H11.1423H11.1426H11.1429H11.1432H11.1435H11.1438H11.1441H11.1443H11.1446H11.1449H11.1452H11.1455H11.1458H11.1461H11.1464H11.1467H11.147H11.1473H11.1476H11.1479H11.1482H11.1485H11.1488H11.1491H11.1494H11.1497H11.15H11.1503H11.1506H11.1509H11.1512H11.1514H11.1517H11.152H11.1523H11.1526H11.1529H11.1532H11.1535H11.1538H11.1541H11.1544H11.1547H11.155H11.1553H11.1556H11.1559H11.1562H11.1565H11.1568H11.157H11.1573H11.1576H11.1579H11.1582H11.1585H11.1588H11.1591H11.1594H11.1597H11.16H11.1603H11.1606H11.1609H11.1612H11.1615H11.1618H11.162H11.1623H11.1626H11.1629H11.1632H11.1635H11.1638H11.1641H11.1644H11.1647H11.165H11.1653H11.1656H11.1659H11.1662H11.1664H11.1667H11.167H11.1673H11.1676H11.1679H11.1682H11.1685H11.1688H11.1691H11.1694H11.1697H11.17H11.1703H11.1706H11.1708H11.1711H11.1714H11.1717H11.172H11.1723H11.1726H11.1729H11.1732H11.1735H11.1738H11.1741H11.1744H11.1747H11.1749H11.1752H11.1755H11.1758H11.1761H11.1764H11.1767H11.177H11.1773H11.1776H11.1779H11.1782H11.1785H11.1788H11.1791H11.1793H11.1796H11.1799H11.1802H11.1805H11.1808H11.1811H11.1814H11.1817H11.182H11.1823H11.1826H11.1829H11.1832H11.1834H11.1837H11.184H11.1843H11.1846H11.1849H11.1852H11.1855H11.1858H11.1861H11.1864H11.1867H11.187H11.1873H11.1876H11.1878H11.1881H11.1884H11.1887H11.189H11.1893H11.1896H11.1899H11.1902H11.1905H11.1908H11.1911H11.1914H11.1917H11.192H11.1922H11.1925H11.1928H11.1931H11.1934H11.1937H11.194H11.1943H11.1946H11.1949H11.1952H11.1955H11.1958H11.1961H11.1964H11.1967H11.197H11.1972H11.1975H11.1978H11.1981H11.1984H11.1987H11.199H11.1993H11.1996H11.1999H11.2002H11.2005H11.2008H11.2011H11.2014H11.2017H11.202H11.2023H11.2026H11.2029H11.2031H11.2034H11.2037H11.204H11.2043H11.2046H11.2049H11.2052H11.2055H11.2058H11.2061H11.2064H11.2067H11.207H11.2073H11.2076H11.2079H11.2082H11.2085H11.2088H11.2091H11.2094H11.2097H11.21H11.2103H11.2106H11.2108H11.2111H11.2114H11.2117H11.212H11.2123H11.2126H11.2129H11.2132H11.2135H11.2138H11.2141H11.2144H11.2147H11.215H11.2153H11.2156H11.2159H11.2162H11.2165H11.2168H11.2171H11.2174H11.2177H11.218H11.2183H11.2186H11.2189H11.2192H11.2195H11.2198H11.2201H11.2204H11.2207H11.221H11.2213H11.2216H11.2219H11.2222H11.2225H11.2228H11.2231H11.2234H11.2237H11.224H11.2243H11.2246H11.2249H11.2252H11.2255H11.2258H11.2261H11.2264H11.2267H11.227H11.2273H11.2276H11.2279H11.2282H11.2285H11.2288H11.2291H11.2294H11.2297H11.23H11.2303H11.2306H11.2309H11.2312H11.2315H11.2318H11.2321H11.2324H11.2327H11.2331H11.2334H11.2337H11.234H11.2343H11.2346H11.2349H11.2352H11.2355H11.2358H11.2361H11.2364H11.2367H11.237H11.2373H11.2376H11.2379H11.2382H11.2385H11.2388H11.2392H11.2395H11.2398H11.2401H11.2404H11.2407H11.241H11.2413H11.2416H11.2419H11.2422H11.2425H11.2428H11.2431H11.2434H11.2438H11.2441H11.2444H11.2447H11.245H11.2453H11.2456H11.2459H11.2462H11.2465H11.2468H11.2472H11.2475H11.2478H11.2481H11.2484H11.2487H11.249H11.2493H11.2496H11.2499H11.2503H11.2506H11.2509H11.2512H11.2515H11.2518H11.2521H11.2524H11.2527H11.2531H11.2534ZM5.48671 10.48C5.48671 11.8617 6.60949 12.9933 8.00004 12.9933C9.38952 12.9933 10.5134 11.8695 10.5134 10.48C10.5134 9.0972 9.38285 7.96668 8.00004 7.96668C6.61831 7.96668 5.48671 9.08946 5.48671 10.48Z" fill="#B8B8B8" stroke="#B8B8B8"></path>
                      </svg>
                    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Newsletter Component Generator

Tailwind Component #604

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-5xl lg:text-6xl font-bold font-heading mb-6">Pricing</h1>
    <p class="text-purple-200 text-lg text-center mb-10 max-w-lg mx-auto">Simple pricing that fits for everyone for the price of a cup of coffee.Start for free, no credit card required.</p>
    <div class="flex flex-wrap justify-center gap-4 mb-16">
      <div class="flex flex-wrap items-center gap-4">
        <p class="text-white text-lg font-bold font-heading">Monthly</p>
        <div class="p-1 w-14 h-8 bg-orange-500 rounded-full">
          <div class="relative">
            <input class="custom-switch-1 opacity-0 absolute z-10 h-8 w-14 top-0 left-0" type="checkbox">
            <div class="absolute left-0 transform w-6 h-6 bg-white rounded-full"></div>
          </div>
        </div>
        <p class="text-white text-lg font-bold font-heading">Annually</p>
      </div>
      <div class="inline-block px-4 py-2 rounded-full bg-orange-50 text-orange-700">SAVE 15% with annual billing</div>
    </div>
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="border border-gray-200 bg-white rounded-3xl px-8 lg:px-10 pb-14 pt-10 h-full">
          <h2 class="text-3xl font-bold font-heading mb-6">Free</h2>
          <div class="flex items-center gap-4 flex-wrap mb-6">
            <h2 class="text-6xl font-bold font-heading">$0</h2>
            <p class="text-xl font-medium">per month</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #605

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <h1 class="uppercase text-white text-4xl lg:text-6xl font-bold font-heading text-center mb-4">FAQ</h1>
    <p class="text-center text-lg text-purple-200 mb-16">Here you will find the answers to the frequently asked questions.</p>
    <div class="flex justify-center flex-wrap gap-6 mb-10">
      <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{ 'bg-purple-700 border border-purple-700 text-white hover:bg-purple-800 focus:ring focus:ring-purple-800': tab == $refs.tab1.textContent, 'text-white bg-purple-900 border border-purple-700 hover:bg-gray-800 focus:ring focus:ring-purple-800': tab != $refs.tab1.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-purple-700 border border-purple-700 shadow font-bold font-heading text-white hover:bg-purple-800 focus:ring focus:ring-orange-800 transition duration-200" href="#">General</a>
      <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'bg-purple-700 border border-purple-700 text-white hover:bg-purple-800 focus:ring focus:ring-purple-800': tab == $refs.tab2.textContent, 'text-white bg-purple-900 border border-purple-700 hover:bg-purple-800 focus:ring focus:ring-purple-800': tab != $refs.tab2.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full text-white bg-purple-900 border border-purple-700 shadow font-bold font-heading hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200" href="#">Community</a>
      <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'bg-purple-700 border border-purple-700 text-white hover:bg-purple-800 focus:ring focus:ring-purple-800': tab == $refs.tab3.textContent, 'text-white bg-purple-900 border border-purple-700 hover:bg-purple-800 focus:ring focus:ring-purple-800': tab != $refs.tab3.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full text-white bg-purple-900 border border-purple-700 shadow font-bold font-heading hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200" href="#">Pricing</a>
    </div>
    <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="border border-purple-700 rounded-3xl mb-3 p-6 cursor-pointer">
      <div class="flex items-center justify-between gap-6">
        <h2 class="text-white text-lg font-semibold">What is Solstice? What is it for?</h2>
        <a class="text-orange-500 hover:text-orange-600 transition duration-200 w-8 h-8" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.66669C8.63586 2.66669 2.66663 8.63592 2.66663 16C2.66663 23.3641 8.63586 29.3334 16 29.3334C23.3641 29.3334 29.3333 23.3641 29.3333 16C29.3333 8.63592 23.3641 2.66669 16 2.66669ZM17.0256 11.8975C17.0256 11.6254 16.9175 11.3646 16.7252 11.1722C16.5329 10.9799 16.272 10.8718 16 10.8718C15.7279 10.8718 15.4671 10.9799 15.2747 11.1722C15.0824 11.3646 14.9743 11.6254 14.9743 11.8975V14.9744H11.8974C11.6254 14.9744 11.3645 15.0824 11.1722 15.2748C10.9798 15.4671 10.8718 15.728 10.8718 16C10.8718 16.272 10.9798 16.5329 11.1722 16.7253C11.3645 16.9176 11.6254 17.0257 11.8974 17.0257H14.9743V20.1026C14.9743 20.3746 15.0824 20.6355 15.2747 20.8278C15.4671 21.0202 15.7279 21.1282 16 21.1282C16.272 21.1282 16.5329 21.0202 16.7252 20.8278C16.9175 20.6355 17.0256 20.3746 17.0256 20.1026V17.0257H20.1025C20.3745 17.0257 20.6354 16.9176 20.8278 16.7253C21.0201 16.5329 21.1282 16.272 21.1282 16C21.1282 15.728 21.0201 15.4671 20.8278 15.2748C20.6354 15.0824 20.3745 14.9744 20.1025 14.9744H17.0256V11.8975Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
        <p class="mt-2 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tincidunt est. Duis odio eros, mattis id elit vitae, molestie tempus massa. Vestibulum varius risus quis erat egestas, et tincidunt metus vestibulum.</p>
      </div>
    </div>
    <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="border border-purple-700 rounded-3xl mb-3 p-6 cursor-pointer">
      <div class="flex items-center justify-between gap-6">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #606

Tailwind CSS

Solstice

<section class="py-24 relative overflow-hidden bg-purple-900" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }">
  <div class="container mx-auto px-4">
    <h1 class="text-white text-4xl lg:text-5xl text-center font-bold font-heading max-w-md lg:max-w-xl mx-auto mb-24">For those seeking an enjoyable way to learn</h1>
    <div class="h-96 mb-32 lg:mb-16">
      <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -mx-4">
        <div x-ref="slide1" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 bg-white shadow rounded-3xl p-8">
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="bg-orange-50 rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/man-avatar3.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Ethan Maynard,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="text-gray-700 text-lg">“Yesterday I had my first day to study. What a great experience learning something so useful in simple ways!.”</p>
          </div>
        </div>  
        <div x-ref="slide2" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 bg-white shadow rounded-3xl p-8">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #607

Tailwind CSS

Solstice

<section class="overflow-hidden py-24">
  <div class="container mx-auto px-4">
    <div class="flex justify-center">
      <a class=" text-gray-500 group mb-12 inline-flex items-center gap-2 flex-wrap" href="#">
        <div class="group-hover:text-gray-600 transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <span class="group-hover:text-gray-600 transition duration-200 font-bold">Back to Blog</span>
      </a>
    </div>
    <div class="flex items-center justify-center gap-3 flex-wrap mb-4">
      <div class="rounded-md border border-gray-100 py-0.5 px-2">
        <span class="text-gray-700 text-xs font-medium">Product</span>
      </div>
      <div class="rounded-md border border-gray-100 py-0.5 px-2">
        <span class="text-gray-700 text-xs font-medium">Development</span>
      </div>
    </div>
    <h1 class="text-center text-3xl lg:text-5xl font-bold mb-12 max-w-xl lg:max-w-3xl mx-auto">The Art and Science of Design Development: Crafting Digital Experiences</h1>
    <img class="w-full rounded-2xl mb-12" src="solstice-assets/images/blog/post-picture.png" alt="">
    <div class="flex items-center justify-between flex-wrap gap-4 mb-12">
      <div class="flex items-center gap-4 flex-wrap">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Content Component Generator

Tailwind Component #608

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <div class="inline-block py-1 px-2 rounded-md bg-orange-50 border border-orange-100 text-orange-500 text-sm font-medium mb-4">Events</div>
    <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-18 max-w-lg">Engage in our weekly online events</h1>
    <div class="border border-gray-100 bg-white rounded-3xl pt-6 px-6 mb-12">
      <div class="flex items-center justify-between flex-wrap gap-4 mb-4">
        <div class="flex items-center gap-2 flex-wrap">
          <p class="font-bold font-heading">August</p>
          <p class="text-gray-500 font-medium">2023</p>
          <a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div class="flex flex-wrap gap-2">
          <a class="py-2 px-4 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Today</a>
          <a class="p-2 rounded-full border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="p-2 rounded-full border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Events Component Generator

Tailwind Component #609

Tailwind CSS

Solstice

<div class="fixed bottom-0 left-0 z-30 w-full p-6" :class="{ 'hidden': !open }" x-data="{ open: true }">
  <div class="container mx-auto px-4">
    <div class="bg-white rounded-5xl bg-white border-2 border-orange-400 shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
      <p class="max-w-md">By clicking “Accept All Cookies”, you agree to the storing of cookies on your device.</p>
      <div class="flex gap-4 flex-wrap"><a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Cookie Settings</a><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Accept All Cookies</a></div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Cookies Component Generator

Tailwind Component #610

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-500 h-1 mb-10"></div>
        <h2 class="text-white text-4xl font-bold font-heading mb-3">101K+</h2>
        <p class="text-white">Users studying around the globe</p>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-500 h-1 mb-10"></div>
        <h2 class="text-white text-4xl font-bold font-heading mb-3">352K</h2>
        <p class="text-white">Registered Users</p>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-500 h-1 mb-10"></div>
        <h2 class="text-white text-4xl font-bold font-heading mb-3">94K</h2>
        <p class="text-white">Registered Users</p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #611

Tailwind CSS

Solstice

<section class="py-12 bg-purple-900">
  <div class="container mx-auto px-4">
    <div class="py-28 relative">
      <div class="hidden sm:block absolute top-6 left-0 bg-orange-100 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-20 md:h-auto" src="solstice-assets/images/cta/men-picture1.png" alt="">
      </div>
      <div class="absolute top-0 right-0 bg-orange-500 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-24 md:h-auto" src="solstice-assets/images/cta/woman-picture1.png" alt="">
      </div>
      <div class="absolute bottom-0 left-0 sm:left-24 bg-orange-300 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-24 md:h-auto" src="solstice-assets/images/cta/woman-picture2.png" alt="">
      </div>
      <div class="hidden sm:block absolute bottom-0 right-0 sm:right-24 bg-orange-50 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-20 md:h-auto" src="solstice-assets/images/cta/men-picture2.png" alt="">
      </div>
      <div class="relative z-10">
        <div class="flex justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" width="68" height="34" viewBox="0 0 68 34" fill="none">
            <path d="M2 34C1.99977 29.7976 2.8273 25.6364 4.43533 21.7539C6.04336 17.8713 8.40039 14.3436 11.3718 11.3721C14.3433 8.40056 17.8709 6.04346 21.7533 4.43539C25.6358 2.82732 29.7969 1.99977 33.9991 2C51.6726 2 66 16.3261 66 34" stroke="#FFF2D6" stroke-width="4" stroke-miterlimit="10"></path>
            <path d="M9.22571 34C9.22571 27.4084 11.8358 21.0868 16.4819 16.4258C21.128 11.7649 27.4294 9.14636 33.9999 9.14636C40.5704 9.14636 46.8718 11.7649 51.5179 16.4258C56.164 21.0868 58.7741 27.4084 58.7741 34" stroke="#FF7100" stroke-width="4" stroke-miterlimit="10"></path>
            <path d="M16.1339 34C16.1339 29.2617 18.0162 24.7174 21.3667 21.3669C24.7173 18.0163 29.2616 16.134 33.9999 16.134C38.7383 16.134 43.2826 18.0163 46.6331 21.3669C49.9836 24.7174 51.8659 29.2617 51.8659 34" stroke="#FFC96D" stroke-width="4" stroke-miterlimit="10"></path>
          </svg>
        </div>
        <h1 class="text-white text-4xl lg:text-5xl mb-10 font-bold font-heading text-center max-w-lg lg:max-w-3xl mx-auto">What are you waiting for? Join now and learn together!</h1>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Call to action Component Generator

Tailwind Component #612

Tailwind CSS

Solstice

<section class="bg-purple-900">
  <div class="pt-24 pb-12 border-b border-white border-opacity-20">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between flex-wrap gap-8">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
        </a>
        <ul class="flex items-center gap-6 flex-wrap">
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Platform</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">How it works</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Resources</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">FAQs</a></li>
        </ul>
        <div class="flex items-center gap-6 flex-wrap">
          <a class="text-white hover:text-opacity-70 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28001 9.09 5.11001 7.38 3.00001 4.79C2.63001 5.42 2.42001 6.16 2.42001 6.94C2.42001 8.43 3.17001 9.75 4.33001 10.5C3.62001 10.5 2.96001 10.3 2.38001 10V10.03C2.38001 12.11 3.86001 13.85 5.82001 14.24C5.19074 14.4122 4.5301 14.4362 3.89001 14.31C4.16162 15.1625 4.69355 15.9084 5.41103 16.4429C6.1285 16.9775 6.99546 17.2737 7.89001 17.29C6.37364 18.4904 4.494 19.1393 2.56001 19.13C2.22001 19.13 1.88001 19.11 1.54001 19.07C3.44001 20.29 5.70001 21 8.12001 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="text-white hover:text-opacity-70 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="currentColor"></path>
            </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #613

Tailwind CSS

Solstice

<section class="py-24 lg:py-56 bg-orange-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap">
      <div class="w-full lg:w-2/3 p-4">
        <div class="border border-orange-200 rounded-5xl py-24 px-6 lg:px-12 h-full flex flex-col justify-center">
          <h1 class="text-orange-100 text-center text-8xl sm:text-9xl lg:text-10xl font-bold font-heading">404</h1>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="rounded-5xl bg-white px-10 py-18">
          <p class="text-2xl font-bold font-heading mb-4">Sorry, that page could not be found.</p>
          <p class="text-gray-500 mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p>
          <div class="flex flex-wrap items-center gap-6"><a class="inline-block text-orange-500 text-sm font-semibold hover:text-orange-600 transition duration-200" href="#">Back to Home</a><a class="inline-block text-orange-500 text-sm font-semibold hover:text-orange-600 transition duration-200" href="#">Support</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #614

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <p class="text-center uppercase text-orange-500 text-sm font-bold font-heading mb-6">HOW IT WORKS</p>
    <h1 class="text-center text-white text-3xl lg:text-5xl font-bold font-heading mb-24 max-w-sm lg:max-w-xl mx-auto">What steps do I need to take to join?</h1>
    <div class="px-4 lg:px-16 rounded-2xl bg-no-repeat bg-cover" style="background-image:url('solstice-assets/images/how-it-works/picture1.png')">
      <div class="w-full lg:w-1/3 rounded-b-2xl bg-white bg-opacity-30 h-6"></div>
      <div class="py-4">
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl mb-4">
          <div class="flex items-center gap-4 flex-wrap">
            <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center">
              <span class="text-lg text-white font-bold font-heading">1</span>
            </div>
            <h2 class="text-xl font-bold font-heading">Create Account</h2>
          </div>
        </div>
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl mx-auto mb-4">
          <div class="flex items-center gap-4 flex-wrap">
            <div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center">
              <span class="text-lg font-bold font-heading">2</span>
            </div>
            <h2 class="text-xl font-bold font-heading">Join or Create Room</h2>
          </div>
        </div>
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl ml-auto mb-4">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works Component Generator

Tailwind Component #615

Tailwind CSS

Solstice

<section class="overflow-hidden bg-purple-900">
  <div class="container px-4 mx-auto pt-16 pb-20">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-col justify-between h-full max-w-xl mx-auto">
          <div>
            <div class="px-2 py-1 rounded-md border border-orange-100 bg-orange-50 inline-flex items-center gap-2 mb-6">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M8.5 1.215H3.5C2 1.215 1 2.215 1 3.715V6.715C1 8.215 2 9.215 3.5 9.215H5.5L7.725 10.695C8.055 10.915 8.5 10.68 8.5 10.28V9.215C10 9.215 11 8.215 11 6.715V3.715C11 2.215 10 1.215 8.5 1.215ZM7.75 5.625H4.25C4.045 5.625 3.875 5.455 3.875 5.25C3.875 5.045 4.045 4.875 4.25 4.875H7.75C7.955 4.875 8.125 5.045 8.125 5.25C8.125 5.455 7.955 5.625 7.75 5.625Z" fill="#FF7100"></path>
              </svg>
              <span class="text-orange-500 text-sm font-medium">Contact Support</span>
            </div>
            <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading mb-4 max-w-xs lg:max-w-md">How can we help you today?</h1>
            <p class="text-purple-200 mb-6">Submit your info and we’ll get back to you as soon as possible.</p>
          </div>
          <div class="bg-orange-200 rounded-3xl p-8">
            <h2 class="text-purple-900 text-2xl font-semibold mb-6 max-w-xs">Click here to report an incident</h2>
            <a class="w-full sm:w-auto h-12 inline-flex items-center justify-center gap-2 py-3 px-5 rounded-full bg-white border border-orange-100 shadow hover:bg-gray-50 focus:ring focus:ring-orange-300 transition duration-200" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M10.9261 14.2967L10.9457 14.2791L10.9633 14.2596C11.0647 14.1469 11.1612 14.0141 11.2308 13.8361C11.2923 13.6864 11.3333 13.515 11.3333 13.3334C11.3333 13.1492 11.2911 12.9756 11.2282 12.8244C11.164 12.6705 11.0747 12.5311 10.9633 12.4073L10.9457 12.3877L10.9261 12.3701C10.8023 12.2587 10.6629 12.1694 10.5089 12.1052C10.1859 11.9706 9.81406 11.9706 9.49099 12.1052C9.33705 12.1694 9.19764 12.2587 9.07381 12.3701L9.05425 12.3877L9.03665 12.4073C8.9252 12.5311 8.8359 12.6705 8.77175 12.8244C8.70878 12.9756 8.66663 13.1492 8.66663 13.3334C8.66663 13.5151 8.70762 13.6864 8.76915 13.8361C8.83871 14.0141 8.93524 14.1469 9.03665 14.2596L9.05425 14.2791L9.07381 14.2967C9.19763 14.4082 9.33704 14.4975 9.49099 14.5616C9.64213 14.6246 9.81578 14.6667 9.99996 14.6667C10.1841 14.6667 10.3578 14.6246 10.5089 14.5616C10.6629 14.4975 10.8023 14.4082 10.9261 14.2967ZM2.16663 10.0001C2.16663 5.68456 5.68443 2.16675 9.99996 2.16675C14.3155 2.16675 17.8333 5.68456 17.8333 10.0001C17.8333 14.3156 14.3155 17.8334 9.99996 17.8334C5.68443 17.8334 2.16663 14.3156 2.16663 10.0001ZM9.99996 5.54175C9.38215 5.54175 8.87496 6.04894 8.87496 6.66675V10.8334C8.87496 11.4512 9.38215 11.9584 9.99996 11.9584C10.6178 11.9584 11.125 11.4512 11.125 10.8334V6.66675C11.125 6.04894 10.6178 5.54175 9.99996 5.54175Z" fill="#530031" stroke="#530031"></path>
              </svg>
              <span class="text-purple-900 text-sm font-semibold">Report</span>
            </a>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #616

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-4xl lg:text-5xl font-bold font-heading mb-24">Discover our features</h1>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature1-primary.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature2-primary.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature3-primary.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature4.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature5-primary2.png" alt="">
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #617

Tailwind CSS

Solstice

<div class="flex flex-wrap">
  <div class="w-full lg:w-1/2 p-4">
    <div class="flex flex-col justify-center py-24 max-w-md mx-auto h-full">
      <form action="">
        <h1 class="text-3xl font-bold font-heading mb-4">Sign up</h1>
        <a class="inline-block text-gray-500 hover: transition duration-200 mb-8" href="#">
          <span>Already have an account?</span>
          <span></span>
          <span class="font-bold font-heading">Login</span>
        </a>
        <label class="block text-sm font-medium mb-2" for="textInput1">Email</label>
        <input class="w-full rounded-full p-4 outline-none border border-gray-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200 mb-4" id="textInput1" type="text" placeholder="john@email.com">
        <label class="block text-sm font-medium mb-2" for="textInput2">Password</label>
        <div class="flex items-center gap-1 w-full rounded-full p-4 border border-gray-100 shadow mb-8">
          <input class="outline-none flex-1 placeholder-gray-500 " id="textInput2" type="password" placeholder="Enter password">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
            <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
          </svg>
        </div>
        <button class="h-14 inline-flex items-center justify-center py-4 px-6 text-white font-bold font-heading rounded-full bg-orange-500 w-full text-center border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 mb-8" type="submit">Sign Up</button>
        <button class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 rounded-full bg-white w-full text-center border border-gray-100 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
            <path d="M10.5003 1.91667C12.5358 1.91667 14.3903 2.67493 15.8117 3.91839L13.8037 5.92643C12.9021 5.19326 11.7542 4.75001 10.5003 4.75001C7.601 4.75001 5.25033 7.10068 5.25033 10C5.25033 12.8993 7.601 15.25 10.5003 15.25C12.7863 15.25 14.7244 13.7867 15.4456 11.7501L15.5636 11.4167H15.2099H10.7503V8.58334H17.7503V8.61792H18.0003H18.4637C18.5415 9.06752 18.5837 9.52907 18.5837 10C18.5837 14.464 14.9643 18.0833 10.5003 18.0833C6.03631 18.0833 2.41699 14.464 2.41699 10C2.41699 5.53599 6.03631 1.91667 10.5003 1.91667Z" fill="#FFC107" stroke="#FFC107" stroke-width="0.5"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #618

Tailwind CSS

Solstice

<section class="py-24 overflow-hidden relative bg-purple-900">
  <p class="text-center text-lg font-medium text-white mb-10">Backed by leading education companies</p>
  <div class="h-28 mb-4 transform -translate-x-24">
    <div class="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
      <div class="w-80 h-28 bg-purple-800 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light1.png" alt="">
      </div>
      <div class="w-80 h-28 bg-purple-800 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light2.png" alt="">
      </div>
      <div class="w-80 h-28 bg-purple-800 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light3.png" alt="">
      </div>
      <div class="w-80 h-28 bg-purple-800 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light4.png" alt="">
      </div>
      <div class="w-80 h-28 bg-purple-800 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light5.png" alt="">
      </div>
    </div>
  </div>
  <div class="h-28 transform translate-x-24">
    <div class="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
      <div class="w-80 h-28 bg-purple-800 py-8 px-10 flex items-center justify-center rounded-2xl">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Logo clouds Component Generator

Tailwind Component #619

Tailwind CSS

Solstice

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="bg-purple-900 border-b border-purple-800">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="text-white group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="text-white group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="text-white group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="text-white group-hover:text-opacity-70 transition duration-200">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #620

Tailwind CSS

Solstice

<div class="flex flex-wrap h-full">
  <div class="w-full lg:w-1/2 p-4">
    <div class="flex flex-col justify-center py-24 max-w-md mx-auto h-full">
      <form action="">
        <h1 class="text-3xl font-bold font-heading mb-4">Login</h1>
        <a class="inline-block text-gray-500 hover: transition duration-200 mb-8" href="#">
          <span>New to Solstice?</span>
          <span></span>
          <span class="font-bold font-heading">Create new account</span>
        </a>
        <label class="block text-sm font-medium mb-2" for="textInput1">Email</label>
        <input class="w-full rounded-full p-4 outline-none border border-gray-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200 mb-4" id="textInput1" type="text" placeholder="john@email.com">
        <label class="block text-sm font-medium mb-2" for="textInput2">Password</label>
        <div class="flex items-center gap-1 w-full rounded-full p-4 border border-gray-100 shadow mb-3">
          <input class="outline-none flex-1 placeholder-gray-500 " id="textInput2" type="password" placeholder="Enter password">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
            <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
          </svg>
        </div>
        <div class="mb-8 flex justify-end"><a class="inline-block text-orange-500 hover:text-orange-600 transition duration-200 text-sm font-semibold" href="#">Forgot Password?</a></div>
        <button class="h-14 inline-flex items-center justify-center py-4 px-6 text-white font-bold font-heading rounded-full bg-orange-500 w-full text-center border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 mb-8" type="submit">Login</button>
        <button class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 rounded-full bg-white w-full text-center border border-gray-100 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Tailwind Component #601

Get the code for 13,400+ components

Tailwind Component #602

Get the code for 13,400+ components

Tailwind Component #603

Get the code for 13,400+ components

Tailwind Component #604

Get the code for 13,400+ components

Tailwind Component #605

Get the code for 13,400+ components

Tailwind Component #606

Get the code for 13,400+ components

Tailwind Component #607

Get the code for 13,400+ components

Tailwind Component #608

Get the code for 13,400+ components

Tailwind Component #609

Get the code for 13,400+ components

Tailwind Component #610

Get the code for 13,400+ components

Tailwind Component #611

Get the code for 13,400+ components

Tailwind Component #612

Get the code for 13,400+ components

Tailwind Component #613

Get the code for 13,400+ components

Tailwind Component #614

Get the code for 13,400+ components

Tailwind Component #615

Get the code for 13,400+ components

Tailwind Component #616

Get the code for 13,400+ components

Tailwind Component #617

Get the code for 13,400+ components

Tailwind Component #618

Get the code for 13,400+ components

Tailwind Component #619

Get the code for 13,400+ components

Tailwind Component #620

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support