grid card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

grid card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

grid card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
 <div className="rounded border-2 hover:border-green-700">
     <div className="flex py-12 px-12">
         <div className="lg:pl-10">
             <h1 className="pt-5 font-bold">grid card</h1>
             <p className="lg:pr-24">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                 tempor incididunt ut labore et dolore magna aliqua.</p>
         </div>
     </div>
 </div>
 <div className="rounded border-2 hover:border-green-700">
     <div className="flex py-12 px-12">
         <div className="lg:pl-10">
             <h1 className="pt-5 font-bold">grid card</h1>
             <p className="lg:pr-24">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                 tempor incididunt ut labore et dolore magna aliqua.</p>
         </div>
     </div>
 </div>
 <div className="rounded border-2 hover:border-green-700">
     <div className="flex py-12 px-12">
         <div className="lg:pl-10">
             <h1 className="pt-5 font-bold">grid card</h1>
             <p className="lg:pr-24">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                 tempor incididunt ut labore et dolore magna aliqua.</p>
         </div>
     </div>
 </div>
</div>

Card with Icon

Card 1

Maiores voluptas laboriosam non dolorum perferendis fuga repellat aut. Blanditiis quos in minus. Voluptatum

Card 2

Maiores voluptas laboriosam non dolorum perferendis fuga repellat aut. Blanditiis quos in minus. Voluptatum

Card 3

Maiores voluptas laboriosam non dolorum perferendis fuga repellat aut. Blanditiis quos in minus. Voluptatum


  <div >
    <div className="flex flex-col lg:flex-row justify-start gap-x-3">
      <div className="shadow-lg hover:border-green-700 border-2 rounded-xl px-4 py-2">
        <div className="pl-3 pt-6 p-2">
          <div className="flex">
            <svg xmlns="http://www.w3.org/2000/svg" width="58" height="48" viewBox="0 0 58 48">
              <defs>
                <clipPath id="clip-path">
                  <rect id="Rectangle_170" data-name="Rectangle 170" width="36" height="36"
                    transform="translate(1214 2352)" fill="#fff" stroke="#707070" stroke-width="1" />
                </clipPath>
              </defs>
              <g id="Mask_Group_15" data-name="Mask Group 15" transform="translate(-1214 -2352)"
                clip-path="url(#clip-path)">
                <g id="cubes" transform="translate(1219 2352)">
                  <g id="Group_4890" data-name="Group 4890">
                    <path id="Path_1325" data-name="Path 1325"
                      d="M33.922,46.593H8.859A2.839,2.839,0,0,1,6.02,43.754V4.246A2.839,2.839,0,0,1,8.859,1.407H33.922c8.728,0,8.058,1.271,8.058,2.839V43.754c0,1.568-.274,2.839-8.058,2.839Z"
                      fill="#fff5f5" />
                    <path id="Path_1326" data-name="Path 1326"
                      d="M39.141,1.407H23.969V46.593H39.141a2.839,2.839,0,0,0,2.839-2.839V4.246a2.839,2.839,0,0,0-2.839-2.839Z"
                      fill="#e5e9f3" />
                    <path id="Path_1327" data-name="Path 1327"
                      d="M39.141,48H8.859a4.25,4.25,0,0,1-4.246-4.246V4.246A4.25,4.25,0,0,1,8.859,0H39.141a4.25,4.25,0,0,1,4.246,4.246V43.754A4.25,4.25,0,0,1,39.141,48ZM8.859,2.813A1.434,1.434,0,0,0,7.427,4.246V43.754a1.434,1.434,0,0,0,1.432,1.432H39.141a1.434,1.434,0,0,0,1.432-1.432V4.246a1.434,1.434,0,0,0-1.432-1.432Z"
                      fill="#273863" />
                    <circle id="Ellipse_18" data-name="Ellipse 18" cx="1.416" cy="1.416" r="1.416"
                      transform="translate(22.541 39.564)" fill="#273863" />
                    <g id="Group_4888" data-name="Group 4888">
                      <path id="Path_1328" data-name="Path 1328"
                        d="M26.288,8.365H21.564a1.407,1.407,0,0,1,0-2.813h4.724a1.407,1.407,0,0,1,0,2.813Z"
                        fill="#273863" />
                    </g>
                    <g id="Group_4889" data-name="Group 4889">
                      <path id="Path_1329" data-name="Path 1329"
                        d="M26.288,5.551H23.969V8.365h2.319a1.407,1.407,0,0,0,0-2.813Z" fill="#0a0a33" />
                      <path id="Path_1330" data-name="Path 1330"
                        d="M39.141,0H23.969V2.813H39.141a1.434,1.434,0,0,1,1.432,1.432V43.754a1.434,1.434,0,0,1-1.432,1.432H23.969V48H39.141a4.25,4.25,0,0,0,4.246-4.246V4.246A4.25,4.25,0,0,0,39.141,0Z"
                        fill="#0a0a33" />
                      <path id="Path_1331" data-name="Path 1331" d="M23.969,39.564v2.831a1.416,1.416,0,0,0,0-2.831Z"
                        fill="#0a0a33" />
                    </g>
                  </g>
                  <g id="Group_4891" data-name="Group 4891">
                    <path id="Path_1332" data-name="Path 1332"
                      d="M23.965,16.281l-6.619-1.548v7.521a.547.547,0,0,0,.312.494l6.072,2.889a.547.547,0,0,0,.47,0l6.081-2.889a.547.547,0,0,0,.312-.494v-7.4Z"
                      fill="#ff6689" />
                    <path id="Path_1333" data-name="Path 1333"
                      d="M28.366,16.122l2.035-.961a.335.335,0,0,0,0-.608L24.1,11.7a.335.335,0,0,0-.272,0L20.4,13.2l-2.849,1.243a.335.335,0,0,0-.013.608L23.82,18.13a.335.335,0,0,0,.291,0Z"
                      fill="#ff008d" />
                    <path id="Path_1334" data-name="Path 1334"
                      d="M23.97,25.69a.546.546,0,0,0,.23-.053l6.081-2.889a.547.547,0,0,0,.312-.494v-7.4L23.97,16.281Z"
                      fill="#ff008d" />
                    <path id="Path_1335" data-name="Path 1335"
                      d="M30.4,14.552,24.1,11.7a.335.335,0,0,0-.131-.029v6.488a.335.335,0,0,0,.141-.032l4.255-2.01L30.4,15.16a.335.335,0,0,0-.005-.608Z"
                      fill="#950049" />
                    <path id="Path_1336" data-name="Path 1336"
                      d="M17.342,26.826l-6.619-1.548V32.8a.547.547,0,0,0,.312.494l6.072,2.889a.547.547,0,0,0,.47,0l6.081-2.889a.547.547,0,0,0,.312-.494V25.4Z"
                      fill="#00ffe7" />
                    <path id="Path_1337" data-name="Path 1337"
                      d="M21.743,26.666l2.035-.961a.335.335,0,0,0,0-.608l-6.3-2.848a.335.335,0,0,0-.272,0l-3.432,1.5-2.849,1.243a.335.335,0,0,0-.013.608L17.2,28.674a.335.335,0,0,0,.291,0Z"
                      fill="#00c7ce" />
                    <path id="Path_1338" data-name="Path 1338"
                      d="M17.346,36.235a.546.546,0,0,0,.23-.053l6.081-2.889a.547.547,0,0,0,.312-.494V25.4l-6.623,1.429Z"
                      fill="#00d7df" />
                    <path id="Path_1339" data-name="Path 1339"
                      d="M23.773,25.1l-6.3-2.848a.335.335,0,0,0-.131-.029v6.488a.335.335,0,0,0,.141-.032l4.255-2.01,2.035-.961A.335.335,0,0,0,23.773,25.1Z"
                      fill="#00969c" />
                    <path id="Path_1340" data-name="Path 1340"
                      d="M30.589,26.828,23.97,25.377V32.8a.547.547,0,0,0,.312.494l6.072,2.889a.547.547,0,0,0,.47,0L36.9,33.295a.547.547,0,0,0,.312-.494V25.4Z"
                      fill="#fff587" />
                    <path id="Path_1341" data-name="Path 1341"
                      d="M34.989,26.773l2.035-.961a.335.335,0,0,0,0-.608l-6.3-2.848a.335.335,0,0,0-.272,0l-3.432,1.5-2.849,1.243a.335.335,0,0,0-.013.608l6.286,3.078a.335.335,0,0,0,.291,0Z"
                      fill="#ffde46" />
                    <path id="Path_1342" data-name="Path 1342"
                      d="M30.593,36.341a.546.546,0,0,0,.23-.053L36.9,33.4a.547.547,0,0,0,.312-.494V25.5l-6.623,1.429Z"
                      fill="#ffde46" />
                    <path id="Path_1343" data-name="Path 1343"
                      d="M37.019,25.2l-6.3-2.848a.335.335,0,0,0-.131-.029v6.488a.335.335,0,0,0,.141-.032l4.255-2.01,2.035-.961A.335.335,0,0,0,37.019,25.2Z"
                      fill="#fdbf00" />
                  </g>
                </g>
              </g>
            </svg>
          </div>
          <h1 className="pt-3 font-bold cardHeading">Card 1</h1>
          <h1 className="text-sm">Maiores voluptas laboriosam non dolorum perferendis fuga repellat aut. Blanditiis quos
            in minus. Voluptatum </h1>
        </div>
      </div>


      <div className="shadow-lg hover:border-green-700 border-2 rounded-xl px-4 py-2">
        <div className="pl-3 pt-6 p-2">
          <div className="flex">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 58 48">
              <defs>
                <clipPath id="clip-path">
                  <rect id="Rectangle_166" data-name="Rectangle 166" width="36" height="36"
                    transform="translate(825 2352)" fill="#fff" stroke="#707070" stroke-width="1" />
                </clipPath>
              </defs>
              <g id="Mask_Group_10" data-name="Mask Group 10" transform="translate(-825 -2352)"
                clip-path="url(#clip-path)">
                <g id="vr-glasses" transform="translate(830 2352)">
                  <path id="Path_1236" data-name="Path 1236"
                    d="M19.481,11.85H8.937a1.406,1.406,0,0,1-1.406-1.406v0a8.943,8.943,0,0,1,8.937-8.936h3.013a1.406,1.406,0,0,1,1.406,1.406v7.531A1.406,1.406,0,0,1,19.481,11.85Z"
                    fill="#ec8600" />
                  <path id="Path_1237" data-name="Path 1237"
                    d="M39.063,11.85H28.519a1.406,1.406,0,0,1-1.406-1.406V2.912a1.406,1.406,0,0,1,1.406-1.406h3.012a8.93,8.93,0,0,1,8.937,8.936A1.407,1.407,0,0,1,39.063,11.85Z"
                    fill="#ff4d05" />
                  <path id="Path_1238" data-name="Path 1238"
                    d="M28.519,11.85H19.481a1.406,1.406,0,0,1-1.406-1.406V1.406A1.406,1.406,0,0,1,19.481,0h9.038a1.406,1.406,0,0,1,1.406,1.406v9.038A1.406,1.406,0,0,1,28.519,11.85Z"
                    fill="#004c9c" />
                  <path id="Path_1239" data-name="Path 1239"
                    d="M29.925,10.444V1.406A1.406,1.406,0,0,0,28.519,0H24V11.85h4.519A1.406,1.406,0,0,0,29.925,10.444Z"
                    fill="#00366d" />
                  <path id="Path_1240" data-name="Path 1240"
                    d="M39.063,30.125H8.937a1.406,1.406,0,0,0-1.406,1.406,16.469,16.469,0,0,0,32.938,0A1.406,1.406,0,0,0,39.063,30.125Z"
                    fill="#ffdcc8" />
                  <path id="Path_1241" data-name="Path 1241"
                    d="M40.469,31.531a1.406,1.406,0,0,0-1.406-1.406H24V48A16.469,16.469,0,0,0,40.469,31.531Z"
                    fill="#ffc5bb" />
                  <path id="Path_1242" data-name="Path 1242"
                    d="M24,39.69a15.744,15.744,0,0,1-4.966-.8,1.406,1.406,0,1,1,.888-2.669,12.968,12.968,0,0,0,8.148,0,1.406,1.406,0,1,1,.89,2.668,15.694,15.694,0,0,1-4.961.8Z"
                    fill="#ffc5bb" />
                  <path id="Path_1243" data-name="Path 1243"
                    d="M39.063,32.937H30.65a6.593,6.593,0,0,1-4.632-1.918L26,31A2.856,2.856,0,0,0,22,31l-.021.022a6.593,6.593,0,0,1-4.632,1.918H8.937a5.926,5.926,0,0,1-5.925-5.925V14.963A5.932,5.932,0,0,1,8.937,9.038H39.062a5.932,5.932,0,0,1,5.925,5.925v12.05a5.927,5.927,0,0,1-5.925,5.925Z"
                    fill="#00366d" />
                  <path id="Path_1244" data-name="Path 1244"
                    d="M28.964,38.89a1.406,1.406,0,1,0-.89-2.668A12.876,12.876,0,0,1,24,36.879V39.69h0a15.693,15.693,0,0,0,4.961-.8Z"
                    fill="#ffadad" />
                  <path id="Path_1245" data-name="Path 1245"
                    d="M26.018,31.019a6.593,6.593,0,0,0,4.632,1.918h8.412a5.927,5.927,0,0,0,5.925-5.925V14.962a5.932,5.932,0,0,0-5.925-5.925H24V30.183A2.874,2.874,0,0,1,26,31l.021.022Z"
                    fill="#01223c" />
                </g>
              </g>
            </svg>
          </div>
          <h1 className="pt-3 font-bold cardHeading">Card 2</h1>
          <h1 className="text-sm">Maiores voluptas laboriosam non dolorum perferendis fuga repellat aut. Blanditiis quos
            in minus. Voluptatum </h1>
        </div>
      </div>
      <div className="shadow-lg hover:border-green-700 border-2 rounded-xl px-4 py-2">
        <div className="pl-3 pt-6 p-2">
          <div className="flex">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 58 48">
              <defs>
                <clipPath id="clip-path">
                  <rect id="Rectangle_169" data-name="Rectangle 169" width="58" height="48"
                    transform="translate(31 57.5)" fill="#fff" stroke="#707070" stroke-width="1" />
                </clipPath>
              </defs>
              <g id="Mask_Group_14" data-name="Mask Group 14" transform="translate(-31 -57.5)"
                clip-path="url(#clip-path)">
                <g id="presentation" transform="translate(36 57.5)">
                  <rect id="Rectangle_168" data-name="Rectangle 168" width="41.379" height="24.828"
                    transform="translate(3.31 1.655)" fill="#41767f" />
                  <circle id="Ellipse_15" data-name="Ellipse 15" cx="3.31" cy="3.31" r="3.31"
                    transform="translate(20.69 31.448)" fill="#95a5a5" />
                  <path id="Path_1317" data-name="Path 1317" d="M19.034,47.172V42.8a4.971,4.971,0,0,1,9.931,0v4.374Z"
                    fill="#f29c1f" />
                  <circle id="Ellipse_16" data-name="Ellipse 16" cx="3.31" cy="3.31" r="3.31"
                    transform="translate(36.414 31.448)" fill="#95a5a5" />
                  <path id="Path_1318" data-name="Path 1318" d="M34.759,47.172V42.8a4.971,4.971,0,0,1,9.931,0v4.374Z"
                    fill="#4482c3" />
                  <circle id="Ellipse_17" data-name="Ellipse 17" cx="3.31" cy="3.31" r="3.31"
                    transform="translate(4.966 31.448)" fill="#95a5a5" />
                  <path id="Path_1319" data-name="Path 1319"
                    d="M3.31,47.172V42.8a4.852,4.852,0,0,1,4.966-4.729A4.852,4.852,0,0,1,13.241,42.8v4.374Z"
                    fill="#cc66a1" />
                  <g id="Group_4887" data-name="Group 4887">
                    <path id="Path_1320" data-name="Path 1320"
                      d="M1.655,0h44.69A1.655,1.655,0,0,1,48,1.655h0A1.655,1.655,0,0,1,46.345,3.31H1.655A1.655,1.655,0,0,1,0,1.655H0A1.655,1.655,0,0,1,1.655,0Z"
                      fill="#cb8252" />
                    <path id="Path_1321" data-name="Path 1321"
                      d="M1.655,24.828h44.69A1.655,1.655,0,0,1,48,26.483h0a1.655,1.655,0,0,1-1.655,1.655H1.655A1.655,1.655,0,0,1,0,26.483H0A1.655,1.655,0,0,1,1.655,24.828Z"
                      fill="#cb8252" />
                  </g>
                  <path id="Path_1324" data-name="Path 1324"
                    d="M.828,44.69H47.172a.828.828,0,0,1,.828.828v1.655a.828.828,0,0,1-.828.828H.828A.828.828,0,0,1,0,47.172V45.517A.828.828,0,0,1,.828,44.69Z"
                    fill="#cb8252" />
                </g>
              </g>
            </svg>
          </div>
          <h1 className="pt-3 font-bold cardHeading">Card 3</h1>
          <h1 className="text-sm">Maiores voluptas laboriosam non dolorum perferendis fuga repellat aut. Blanditiis quos
            in minus. Voluptatum </h1>
        </div>
      </div>
    </div>
  </div>