Sign in Get Started

tailwind card

Phoenix Logan 
<div class="max-w-sm w-full lg:max-w-full lg:flex">
  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/img/card-left.jpg')" title="Woman holding a mug">
  </div>
  <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
    <div class="mb-8">
      <p class="text-sm text-gray-600 flex items-center">
        <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
        </svg>
        Members only
      </p>
      <div class="text-gray-900 font-bold text-xl mb-2">Can coffee make you a better developer?</div>
      <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="/img/jonathan.jpg" alt="Avatar of Jonathan Reinink">
      <div class="text-sm">
        <p class="text-gray-900 leading-none">Jonathan Reinink</p>
        <p class="text-gray-600">Aug 18</p>
      </div>
    </div>
  </div>
</div>
View another examples Add Own solution
Log in, to leave a comment

4.4
5
Krish 100200 points 

                                    1234567891011121314151617181920212223242526272829303132333435363738394041&lt;div class=&quot;grid grid-cols-1 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 md:py-16&quot;&gt;  &lt;div class=&quot;relative z-10 col-start-1 row-start-1 px-4 pt-40 pb-3 bg-gradient-to-t from-black sm:bg-none&quot;&gt;    &lt;p class=&quot;text-sm font-medium text-white sm:mb-1 sm:text-gray-500&quot;&gt;Entire house&lt;/p&gt;    &lt;h2 class=&quot;text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl&quot;&gt;Beach House in Collingwood&lt;/h2&gt;  &lt;/div&gt;  &lt;div class=&quot;col-start-1 row-start-2 px-4 sm:pb-16&quot;&gt;    &lt;div class=&quot;flex items-center text-sm font-medium my-5 sm:mt-2 sm:mb-4&quot;&gt;      &lt;svg width=&quot;20&quot; height=&quot;20&quot; fill=&quot;currentColor&quot; class=&quot;text-violet-600&quot;&gt;        &lt;path d=&quot;M9.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118l-2.8-2.034c-.784-.57-.381-1.81.587-1.81H7.03a1 1 0 00.95-.69L9.05 3.69z&quot; /&gt;      &lt;/svg&gt;      &lt;div class=&quot;ml-1&quot;&gt;        &lt;span class=&quot;text-black&quot;&gt;4.94&lt;/span&gt;        &lt;span class=&quot;sm:hidden md:inline&quot;&gt;(128)&lt;/span&gt;      &lt;/div&gt;      &lt;div class=&quot;text-base font-normal mx-2&quot;&gt;&middot;&lt;/div&gt;      &lt;div&gt;Collingwood, Ontario&lt;/div&gt;    &lt;/div&gt;    &lt;hr class=&quot;w-16 border-gray-300 hidden sm:block&quot;&gt;  &lt;/div&gt;  &lt;div class=&quot;col-start-1 row-start-3 space-y-3 px-4&quot;&gt;    &lt;p class=&quot;flex items-center text-black text-sm font-medium&quot;&gt;      &lt;img src=&quot;/kevin-francis.jpg&quot; alt=&quot;&quot; class=&quot;w-6 h-6 rounded-full mr-2 bg-gray-100&quot;&gt;      Hosted by Kevin Francis    &lt;/p&gt;    &lt;button type=&quot;button&quot; class=&quot;bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2 rounded-lg&quot;&gt;Check availability&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;col-start-1 row-start-1 flex sm:col-start-2 sm:row-span-3&quot;&gt;    &lt;div class=&quot;w-full grid grid-cols-3 grid-rows-2 gap-2&quot;&gt;      &lt;div class=&quot;relative col-span-3 row-span-2 md:col-span-2&quot;&gt;        &lt;img src=&quot;/beach-house.jpg&quot; alt=&quot;&quot; class=&quot;absolute inset-0 w-full h-full object-cover bg-gray-100 sm:rounded-lg&quot; /&gt;      &lt;/div&gt;      &lt;div class=&quot;relative hidden md:block&quot;&gt;        &lt;img src=&quot;/beach-house-interior.jpg&quot; alt=&quot;&quot; class=&quot;absolute inset-0 w-full h-full object-cover rounded-lg bg-gray-100&quot; /&gt;      &lt;/div&gt;      &lt;div class=&quot;relative hidden md:block&quot;&gt;        &lt;img src=&quot;/beach-house-view.jpg&quot; alt=&quot;&quot; class=&quot;absolute inset-0 w-full h-full object-cover rounded-lg bg-gray-100&quot; /&gt;      &lt;/div&gt;    &lt;/div&gt;  &lt;/div&gt;&lt;/div&gt;

4.4 (5 Votes)
0
Are there any code examples left?
Find Add Code snippet
New code examples in category Other
SHOW MORE
Create a Free Account
Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.
Sign up
Develop soft skills on BrainApps
Complete the IQ Test
Relative searches
tailwind card ui tailwind css how to make card tailwind favorite card article card tailwind cards using tailwinds css import tailwind cards info cards tailwind tailwindcss card code how to apply cards in tailwind css tailwind css nince card tailwind sample card card demo tailwindcss creating a card using tailwind simple card in tailwind css tailwindcss.com cards tailwind css card components tailwind components cards cards with tailwind css tailwind card layout card under card tailwind css card detail section tailwind tailwind media card tailwind components card tailwind card view tailwind css card component tailwind card design example how to build a card in tailwind tailwind css card user cards tailwind css documentation information cards in tailwind css cards in tailwind css information tailwind css ui card tailwindcss ui card card tailwind ui tailwind card info card user with tailwind css cards tailwind css tailwind card list card for client tailwindcss tailwind cards layout tailwind cards page tailwind ui cards component tailwind ui cards card using tailwind cards in tailwind css card view in tailwind tailwind card demo card using tailwind css make card tailwind css card tailwind css cards with css tailwind create card tailwind css client tailwind card tailwind css card example tailwind card table tailwind css info card product card tailwind tailwind shopping card tailwind ui card custom card tailwind css tailwind ui grid card tailwind css responsive cards tailwind card example tailwind card code tailwind css card codepen tailwind css credit card tailwind css fcard card layout tailwindcss building a card with tailwind card tailind css tailwind card css card compontsnt in tailwind css tailwind css product cards tailwind product cards example tailwindcss card with image styling cards tailwind tailwind card components tailwind cards example how to make a card in tailwind css tailwindcss card with image cover tail wind cards tailwinds css cards tailwind css cards tailwind box card tailwind product cards vertical horizontal card in tailwind css tailwind css card with text on image how to build a card with tailwindcss tailwind card image tailwind css card
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with
Not registered?
Sign up takes less than a minute

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.
Creating a new code example
Code snippet title
Source