Merge pull request #821 from creativetimofficial/@material-tailwind/html-v2.3.1

@Material tailwind/html v2.3.1

Author: dragosct

docs-content/html/card/background-blog-card.tsx

@@ -1,20 +1,20 @@
 export function BackgroundBlogCard() {
   return (
-    <div className="relative grid h-[40rem] w-full max-w-[28rem] flex-col items-end justify-center overflow-hidden rounded-xl bg-white bg-clip-border text-center text-gray-700">
-      <div className="absolute inset-0 m-0 h-full w-full overflow-hidden rounded-none bg-transparent bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-clip-border bg-center text-gray-700 shadow-none">
+    <div className="relative grid h-[35rem] max-w-lg flex-col items-end justify-center overflow-hidden rounded-lg bg-white">
+      <div className="absolute inset-0 m-0 h-full w-full overflow-hidden rounded-none bg-transparent bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-center">
         <div className="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50"></div>
       </div>
-      <div className="relative p-6 px-6 py-14 md:px-12">
-        <h2 className="mb-6 block font-sans text-4xl font-medium leading-[1.5] tracking-normal text-white antialiased">
+      <div className="relative text-center p-6 px-6 py-14 md:px-12">
+        <h2 className="mb-6 text-3xl font-medium text-white">
           How we design and code open-source projects?
         </h2>
-        <h5 className="mb-4 block font-sans text-xl font-semibold leading-snug tracking-normal text-gray-400 antialiased">
-          Tania Andrew
+        <h5 className="mb-4 text-xl font-semibold text-slate-300">
+          Lewis Daniel
         </h5>
         <img
-          alt="Tania Andrew"
+          alt="Lewis Daniel"
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
-          className="relative inline-block h-[74px] w-[74px] !rounded-full border-2 border-white object-cover object-center"
+          className="relative inline-block h-32 w-32 rounded-full border border-white"
         />
       </div>
     </div>

docs-content/html/card/blog-card.tsx

@@ -1,38 +1,40 @@
 export function BlogCard() {
   return (
-    <div className="relative flex max-w-[24rem] flex-col overflow-hidden rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
-      <div className="relative m-0 overflow-hidden rounded-none bg-transparent bg-clip-border text-gray-700 shadow-none">
-        <img
-          src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1471&amp;q=80"
-          alt="ui/ux review check"
-        />
-      </div>
-      <div className="p-6">
-        <h4 className="block font-sans text-2xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
-          UI/UX Review Check
-        </h4>
-        <p className="mt-3 block font-sans text-xl font-normal leading-relaxed text-gray-700 antialiased">
-          Because it&apos;s about motivating the doers. Because I&apos;m here to
-          follow my dreams and inspire others.
-        </p>
-      </div>
-      <div className="flex items-center justify-between p-6">
-        <div className="flex items-center -space-x-3">
-          <img
-            alt="natali craig"
-            src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1061&amp;q=80"
-            className="relative inline-block h-9 w-9 !rounded-full  border-2 border-white object-cover object-center hover:z-10"
-          />
-          <img
-            alt="Tania Andrew"
-            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
-            className="relative inline-block h-9 w-9 !rounded-full  border-2 border-white object-cover object-center hover:z-10"
-          />
+    <a href="javascript:void(0)">
+      <div className="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
+        <div className="relative h-56 m-2.5 overflow-hidden text-white rounded-md">
+          <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1471&amp;q=80" alt="card-image" />
         </div>
-        <p className="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
-          January 10
-        </p>
-      </div>
-    </div>
+        <div className="p-4">
+          <div className="mb-4 rounded-full bg-cyan-600 py-0.5 px-2.5 border border-transparent text-xs text-white transition-all shadow-sm w-20 text-center">
+            POPULAR
+          </div>
+          <h6 className="mb-2 text-slate-800 text-xl font-semibold">
+            Website Review Check
+          </h6>
+          <p className="text-slate-600 leading-normal font-light">
+            The place is close to Barceloneta Beach and bus stop just 2 min by walk
+            and near to &quot;Naviglio&quot; where you can enjoy the main night life in
+            Barcelona.
+          </p>
+        </div>
+
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center">
+            <img
+              alt="Tania Andrew"
+              src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
+              className="relative inline-block h-8 w-8 rounded-full"
+            />
+            <div className="flex flex-col ml-3 text-sm">
+              <span className="text-slate-800 font-semibold">Lewis Daniel</span>
+              <span className="text-slate-600">
+                January 10, 2024
+              </span>
+            </div>
+          </div>
+        </div>
+      </div> 
+    </a>
   );
 }