Profidev

Cards

Recipe Card

Jun 18, 2026

ReactJS version

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    
    <body>
  <div class="absolute top-0 left-0 w-full z-50 h-screen flex justify-center items-center p-4 md:p-6 lg:p-8">
    <div class="max-w-lg bg-gradient-to-b from-white/60 to-white/30 text-[#1c0708] backdrop-blur-[.65em] border-[1px] border-solid border-white border-opacity-10 rounded-2xl shadow-black/50 overflow-hidden shadow-2xl hover:-translate-y-1 hover:shadow-black/75 hover:backdrop-blur-[1em] transition">
      <div class="grid place-items-center grid-cols-6 gap-2">
        <div class="col-span-3 p-8">
          <h2 class="font-bold text-2xl">
            Burrata & Balsamic Roasted Tomato Crostini
          </h2>
          <div class="tag-lines">
            <span class="tag">Dairy</span> <span class="tag">Vegetarian</span> <span class="tag">Mediterranean</span>
          </div>
          <p class="text-sm text-[#1c0708]/60">
            Oven-roasted tomatoes <br> and herbs paired with smooth burrata cheese, served on baked bread.
          </p>
          <div class="panel-heading active" id="headingOne" role="tab">
            <h4 class="panel-title">
              <a aria-controls="collapseOne" aria-expanded="true" class="mt-6 py-3 px-5 inline-flex bg-[#e84118] hover:bg-[#c23616] transition-colors text-gray-200 font-bold rounded-full text-sm collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">See Recipe</a>
            </h4>
          </div>
        </div>
        <div class="col-span-3 -mt-5 -mb-10">
          <img alt="" class="recipe_img" src="https://assets.codepen.io/4927073/tomato_board2.png">
        </div>
      </div>
      <div aria-labelledby="headingOne" class="panel-collapse collapse" id="collapseOne" role="tabpanel">
        <div class="panel-body">
          <div class="panel-top">
            <div class="level-item">
              <div>
                <div class="heading">
                  Total Servings: 2
                </div>
                <div class="heading">
                  Prep Time: 5 min
                </div>
              </div>
            </div>
          </div>
          <div class="ingredients">
            <h3 class="ingredients">
              Ingredients:
            </h3>
            <ul class="ingredients">
              <li>
                <label><input checked="checked" type="checkbox"> <span>12 ounces burrata</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>2 cups cherry tomatoes</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>1 Tbsp olive oil</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>1 Tbsp balsamic vinegar</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>2 tsp honey</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>1 clove garlic</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>½ tsp dried basil</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>1 tsp chopped fresh thyme</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>¼ tsp dried oregano</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>salt & pepper</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>chili flakes</span></label>
              </li>
              <li>
                <label><input type="checkbox"><span>1 baguette</span></label>
              </li>
            </ul>
          </div>
          <div class="directions">
            <h3 class="directions">
              Directions:
            </h3>
            <ol class="directions">
              <li>
                <label><input type="checkbox"> <span>Preheat oven to 375°F.</span></label>
              </li>
              <li>
                <label><input type="checkbox"> <span>Slice tomatoes and toss in oil, balsamic vinegar, honey, garlic, basil, thyme, and oregano. Season with salt and pepper.</span></label>
              </li>
              <li>
                <label><input type="checkbox"> <span>Slice baguette and drizzle with olive oil.</span></label>
              </li>
              <li>
                <label><input type="checkbox"> <span>Toast up bread in a hot skillet until golden brown.</span></label>
              </li>
              <li>
                <label><input type="checkbox"> <span>Spread on fresh burrata cheese.</span></label>
              </li>
              <li>
                <label><input type="checkbox"> <span>Top with marinated tomato slices. Then bake for 12-15 minutes.</span></label>
              </li>
              <li>
                <label><input type="checkbox"> <span>Top with parmesan, warm marinara sauce, oregano, and chili flakes.</span></label>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
body {
  background: url(https://assets.codepen.io/4927073/AdobeStock_78589840.jpeg)
    center/cover no-repeat fixed;
  font: 1em/1.618 Inter, sans-serif;
}
h2 {
  font-family: Playfair Display;
  font-size: 36px !important;
  font-weight: 100 !important;
  padding: 0 0 5px 0;
  width: 160%;
  text-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 30%);
  text-shadow: -0.5px -0.5px 0.5px rgb(0 0 0 / 30%),
    1px 1px 2px rgb(212 212 212 / 30%);
  mix-blend-mode: hard-light;
}
.tag-lines {
    position: relative;
  margin: 5px 0 7px 2px;
	gap: 5px;
	width: 120%;
}
span.tag {
      align-items: center;
    background-color: hsl(0deg 0% 96% / 85%);
    border-radius: 5px;
    color: #4a4a4a;
    display: inline-flex;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    line-height: 1.5;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
    font-family: Roboto Condensed;
    margin-right: 2px;
    text-shadow: 0.5px 0.5px 0.5px rgb(255 255 255 / 50%);
}



span.tag2 {
      box-shadow: inset 1px -0.5px 0.5px 0 rgba(255, 255, 255, .2), inset -1.5px 1px 2.5px 0 rgba(0, 0, 0, .2), 1.5px 0.5px 0.5px 0 rgba(0, 0, 0, .5), -0.5px -0.5px 0.5px 0 rgba(0, 0, 0, .5), 1.5px -0.5px 0.5px 0 rgba(0, 0, 0, .5), -0.5px -0.5px 2.5px 0 rgba(0, 0, 0, .5), 2px 0 0.5px 0 rgba(255, 255, 255, .3);
    background: linear-gradient(25deg, #525a65, #3b424c);
    color: rgba(255, 255, 255, .8);
    text-shadow: 0 0 2px rgba(255, 255, 255, .2);
    opacity: 0.9;
}

p.text-sm {
  font-size: 0.875rem;
  filter: drop-shadow(0.25px 0.25px 0.25px rgb(25 25 25 / 40%)) contrast(1.25)
    opacity(0.9);
}

p.text-sm {
  filter: drop-shadow(0.25px 0.25px 0.25px rgb(25 25 25 / 65%)) contrast(4.25)
    saturate(3.5) opacity(0.65);
  text-shadow: 0.5px 0.5px 0.5px hsl(0deg 0% 95% / 35%),
    -0.25px -0.25px 0.25px hsl(0deg 0% 50% / 15%) !important;
  font-weight: 300;
  color: rgb(28 7 8 / 0.6);
  font-size: 16px;
  font-family: Roboto;
  mix-blend-mode: darken;
  letter-spacing: 0.125px;
  width: 125%;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
  color: white;
}
.collapse {
  display: none;
}
.collapse.in {
  display: block;
  visibility: visible;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.4s ease;
  transition: height 0.4s ease;
}

.panel-title > a,
.panel-title > a:active {
  z-index: 5;
  position: relative;
  display: block;
  text-decoration: none;
  color: #fdfdfd;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35);
}
.panel-heading a:before {
  font-family: "Ionicons";
  content: "\f123";
  float: right;
  transition: all 0.5s;
}
.panel-title a:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.panel-title a.collapsed:before {
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  transform: rotate(0);
}
.panel-body {
  padding: 20px 30px 30px 30px;
  position: relative;
  background-color: hsl(0deg 0% 98% / 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0.5vh 5px 0px rgba(0, 0, 0, 0.25);
}
ul.ingredients {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  font-size: 13px;
  width: 100%;
  padding: 0 !important;
  margin: auto;
  gap: 0px 5px;
  top: -10px;
  position: relative;
  line-height: 1.5;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  grid-template-rows: repeat(5, 2fr);
  grid-auto-flow: column;
}
li:nth-child(4),
li:nth-child(8) {
  grid-column: span 1;
  grid-row: span 2;
  text-wrap: wrap;
}
ul.ingredients li {
  &:hover {
    color: #3298dc;
  }
}
ul.ingredients li input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  &::before {
    color: #666;
    font-family: "Font Awesome 5 Free";
    content: "\f0c8";
    margin-right: 0.25rem;
  }
  &:checked {
    ~ span {
      font-style: italic;
      color: #666;
      text-decoration: line-through;
    }
    &::before {
      content: "\f14a";
    }
  }
}
.panel-body h3.ingredients {
  width: 100%;
  margin: auto;
  padding: 0 0 4px 2px;
  top: -12px;
  position: relative;
  font-family: "Inter";
  font-weight: 500;
  letter-spacing: 0.4px;
  font-size: 17px;
}
.panel-top {
  width: 100%;
  padding: 0;
  top: -10px;
  position: relative;
  margin-bottom: -28px;
  right: -15px;
  text-align: justify;
}
.level-item {
  right: 0;
  position: relative;
  display: flex;
  justify-content: flex-end;
  text-align: right;
}
.heading {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 2px;
  text-transform: uppercase;
  line-height: 1.35;
}
.directions {
  width: 100%;
}
.panel-body h3.directions {
  width: 100%;
  margin: auto;
  padding: 0 0 0px 2px;
  position: relative;
  font-family: "Inter";
  font-weight: 500;
  letter-spacing: 0.4px;
  font-size: 17px;
  top: -2px;
}
ol.directions {
  list-style: auto;
  list-style-position: outside;
  margin-left: 32px;
  font-size: 13px;
  line-height: 1.45;
}
ol li {
  counter-increment: cupcake;
}
ol li::marker {
  content: none;
}
ol li::before {
  content: counter(cupcake);
  width: 13px;
  height: 13px;
  display: inline-flex;
  margin-left: -23px;
  position: relative;
  left: -2.5px;
  top: -2px;
  z-index: 1;
  font-size: 10px;
  font-weight: 500;
  font-family: Roboto;
  justify-content: center;
  color: #30363d;
  text-shadow: 0.5px 0.5px 0.5px rgb(255 255 255 / 75%);
}
ol.directions li input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  &::before {
    content: "";
    margin-right: 0.25rem;
    box-shadow: #0004 0 1px 2px 0, #0003 0 0.5px 2px 1px,
      1px 1px 10px 2px #00000026;
    background-color: #fff;
    background-image: linear-gradient(
      180deg,
      #ffffff 10%,
      hsl(216, 4%, 85%) 60%,
      80%,
      hsl(216, 4%, 70%)
    );
    z-index: 0 !important;
    width: 13px;
    height: 13px;
    display: inline-flex;
    margin-left: -16px;
    position: relative;
    left: -3px;
    top: 1px;
    border-radius: 50%;
  }
  &:checked {
    ~ span {
      font-style: italic;
      color: #666;
      text-decoration: line-through;
    }
    &::before {
      content: "";
      box-shadow: hsl(0, 0%, 65%) 0 1px 1px 1px, 0 -1px 2px 1px #fff;
      background: linear-gradient(
        0deg,
        hsl(0, 0%, 90%) 5%,
        hsl(0, 0%, 95%) 15%,
        hsl(0, 0%, 100%) 40%,
        hsl(0, 0%, 95%) 55%,
        hsl(0, 0%, 70%) 90%
      );
      outline: none;
    }
  }
}

img.recipe_img {
  content: url(https://assets.codepen.io/4927073/tomato_board2.png);
  object-fit: cover;
  width: 350px !important;
  height: auto;
  position: relative;
  max-width: fit-content;
  z-index: -1;
  transform: rotate(6deg);
  top: 2px;
  right: 18px;
  filter: drop-shadow(4.5px 4.5px 6px var(--dcolor)) saturate(1.3) opacity(0.95)
    contrast(0.9) brightness(0.95);
  --dcolor: #332315;
}

$(".panel-collapse").on("show.bs.collapse", function () {
  $(this).siblings(".panel-heading").addClass("active");
});

$(".panel-collapse").on("hide.bs.collapse", function () {
  $(this).siblings(".panel-heading").removeClass("active");
});

Похожая запись

Cards

Pricing card

Aug 25, 2023 admin
Cards

Slider Card

Aug 25, 2023 admin
Cards

Parallax hover card effect

Jul 22, 2023 admin

You missed

Cards ReactJS

Recipe Card React.js

18.06.2026 admin
Cards

Recipe Card

18.06.2026 admin
ReactJS Sliders

Image Carousel React.js

08.06.2026 admin
Sliders

Image Carousel

08.06.2026 admin