Using Anima 4 code generation. Used on frame 2 of this Figma file: https://www.figma.com/file/C3i3LtfHJ5cldna0fv5vff/Skilled-UI-Interview?node-id=2%3A354

frame-2.css

/* screen - frame-2 */

.border-class-1 {
  border: 1px solid transparent;
}
.font-class-1 {
  font-family: 'Montserrat', Helvetica, Arial, serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.25px;
}
.font-class-2 {
  font-family: 'Montserrat', Helvetica, Arial, serif;
  font-style: normal;
  font-weight: 400;
}
.font-class-3 {
  font-family: 'Montserrat', Helvetica, Arial, serif;
  font-style: normal;
  font-weight: 600;
}
.font-class-4 {
  font-family: 'Montserrat', Helvetica, Arial, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.25px;
}
.frame-2 {
  background-color: rgba(250,239,227,1.0);
  height: 1200px;
  overflow: hidden;
  position: relative;
  width: 1600px;
}
.frame-2 .ahmad-nur-fawaid-C61RwL {
  background-color: transparent;
  color: rgba(23,22,37,1.0);
  font-size: 13px;
  height: auto;
  left: 1107px;
  position: absolute;
  text-align: left;
  top: 822px;
  width: auto;
}
.frame-2 .amelia-minderlow-C61RwL {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 15px;
  height: auto;
  left: 1169px;
  line-height: 18px;
  position: absolute;
  text-align: left;
  top: 704px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .avatar-C61RwL {
  background-color: transparent;
  height: 58px;
  left: 1088px;
  position: absolute;
  top: 680px;
  width: 58px;
}
.frame-2 .base-C61RwL {
  background-color: rgba(70,67,211,1.0);
  border-radius: 75px;
  box-shadow: 55px 65px 44px rgba(196,104,77,0.13) , 20px 30px 30px rgba(102,62,51,0.06) , 10px 20px 20px rgba(102,62,51,0.04) , 1px 10px 10px rgba(102,62,51,0.02);;
  height: 80px;
  left: 327px;
  position: absolute;
  top: 178px;
  width: 660px;
}
.frame-2 .base-VMr6Om {
  background-color: transparent;
  height: 48px;
  left: 343px;
  position: absolute;
  top: 194px;
  width: 48px;
}
.frame-2 .bg-C61RwL {
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 55px 65px 44px rgba(196,104,77,0.13) , 20px 30px 30px rgba(102,62,51,0.06) , 10px 20px 20px rgba(102,62,51,0.04) , 1px 10px 10px rgba(102,62,51,0.02);;
  height: 106px;
  left: 1057px;
  position: absolute;
  top: 658px;
  width: 327px;
}
.frame-2 .bg-VMr6Om {
  background-color: var(--coral);
  border-radius: 24px;
  height: 211px;
  left: 612px;
  position: absolute;
  top: 811px;
  width: 375px;
}
.frame-2 .bg-mzXdH9 {
  background-color: transparent;
  height: 154px;
  left: 167px;
  position: absolute;
  top: 683px;
  width: 375px;
}
.frame-2 .card-team-C61RwL {
  background-color: transparent;
  height: 290px;
  left: 1002px;
  position: absolute;
  top: 124px;
  width: 412px;
}
.frame-2 .compared-to-21340-C61RwL {
  background-color: transparent;
  color: var(--bombay);
  font-size: 14px;
  height: auto;
  left: 680px;
  position: absolute;
  text-align: left;
  top: 395px;
  width: 223px;
}
.frame-2 .compared-to-21340-VMr6Om {
  background-color: transparent;
  color: var(--bombay);
  font-size: 14px;
  height: auto;
  left: 680px;
  position: absolute;
  text-align: left;
  top: 725px;
  width: 223px;
}
.frame-2 .complete-your-profil-C61RwL {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 14px;
  height: auto;
  left: 1089px;
  position: absolute;
  text-align: left;
  top: 549px;
  width: 275px;
}
.frame-2 .consult-method-C61RwL {
  background-color: transparent;
  color: var(--bombay);
  font-size: 12px;
  height: auto;
  left: 1169px;
  line-height: 16px;
  position: absolute;
  text-align: left;
  top: 680px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .developer-C61RwL {
  background-color: transparent;
  color: var(--white);
  font-size: 14px;
  height: auto;
  left: 262px;
  opacity: 0.5;
  position: absolute;
  text-align: left;
  top: 733px;
  width: 97px;
}
.frame-2 .dot-C61RwL {
  background-color: var(--bombay);
  border-radius: 2px;
  height: 2px;
  left: 1265px;
  position: absolute;
  top: 687px;
  width: 2px;
}
.frame-2 .emily-dougrer-C61RwL {
  background-color: transparent;
  color: var(--white);
  font-size: 18px;
  height: auto;
  left: 262px;
  position: absolute;
  text-align: left;
  top: 708px;
  width: 142px;
}
.frame-2 .fawait-C61RwL {
  background-color: transparent;
  color: var(--bombay);
  font-size: 10px;
  height: auto;
  left: 1107px;
  position: absolute;
  text-align: left;
  top: 839px;
  width: auto;
}
.frame-2 .feather-icon-star-1-GnKe7e {
  background-color: transparent;
  height: 16px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 16px;
}
.frame-2 .feather-icon-star-2-GnKe7e {
  background-color: transparent;
  height: 16px;
  left: 16px;
  position: absolute;
  top: 0px;
  width: 16px;
}
.frame-2 .feather-icon-star-3-GnKe7e {
  background-color: transparent;
  height: 16px;
  left: 32px;
  position: absolute;
  top: 0px;
  width: 16px;
}
.frame-2 .feather-icon-star-4-GnKe7e {
  background-color: transparent;
  height: 16px;
  left: 48px;
  position: absolute;
  top: 0px;
  width: 16px;
}
.frame-2 .feather-icon-star-5-GnKe7e {
  background-color: transparent;
  height: 16px;
  left: 64px;
  position: absolute;
  top: 0px;
  width: 16px;
}
.frame-2 .frame-C61RwL {
  background-color: var(--coral);
  border-radius: 8px;
  height: 48px;
  left: 644px;
  position: absolute;
  top: 505px;
  width: 48px;
}
.frame-2 .get-a-lovly-app-link-C61RwL {
  background-color: transparent;
  color: var(--white);
  font-family: 'Nunito Sans', Helvetica, Arial, serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  height: auto;
  left: 644px;
  letter-spacing: 0.00px;
  position: absolute;
  text-align: left;
  top: 833px;
  width: 237px;
}
.frame-2 .graph-C61RwL {
  background-color: transparent;
  height: 42px;
  left: 1088px;
  position: absolute;
  top: 210px;
  width: 242px;
}
.frame-2 .graph-copy-C61RwL {
  background-color: transparent;
  height: 86px;
  left: 1089px;
  position: absolute;
  top: 212px;
  width: 240px;
}
.frame-2 .hand-C61RwL {
  background-color: transparent;
  height: 18px;
  left: 269px;
  position: absolute;
  top: 770px;
  width: 18px;
}
.frame-2 .hi-there-w--and-ideas-C61RwL {
  background-color: transparent;
  color: var(--white);
  font-size: 16px;
  height: auto;
  left: 199px;
  line-height: 24px;
  position: absolute;
  text-align: left;
  top: 770px;
  width: 313px;
}
.frame-2 .ic-down-C61RwL {
  background-color: transparent;
  height: 16px;
  left: 1314px;
  position: absolute;
  top: 283px;
  width: 16px;
}
.frame-2 .icon-close-C61RwL {
  background-color: transparent;
  height: 13px;
  left: 942px;
  position: absolute;
  top: 833px;
  width: 13px;
}
.frame-2 .icon-close-VMr6Om {
  background-color: transparent;
  height: 13px;
  left: 497px;
  position: absolute;
  top: 705px;
  width: 13px;
}
.frame-2 .image-C61RwL {
  background-color: transparent;
  height: 48px;
  left: 199px;
  position: absolute;
  top: 705px;
  width: 48px;
}
.frame-2 .lifestyle--way-to-row-88YoGf {
  background-color: transparent;
  color: var(--white);
  font-size: 14px;
  height: 20px;
  left: 0px;
  line-height: 20px;
  position: absolute;
  text-align: left;
  top: 4px;
  white-space: nowrap;
  width: 478px;
}
.frame-2 .line-C61RwL {
  background-color: rgba(215,215,222,1.0);
  height: 33px;
  left: 836px;
  position: absolute;
  top: 948px;
  width: 1px;
}
.frame-2 .mp3-44k-hz-ps-1241-mb-88YoGf {
  background-color: transparent;
  color: var(--white);
  font-size: 12px;
  height: auto;
  left: 0px;
  line-height: 16px;
  opacity: 0.5;
  position: absolute;
  text-align: left;
  top: 29px;
  white-space: nowrap;
  width: 478px;
}
.frame-2 .oval-C61RwL {
  background-color: transparent;
  height: 10px;
  left: 1088px;
  position: absolute;
  top: 843px;
  width: 10px;
}
.frame-2 .oval-VMr6Om {
  background-color: transparent;
  height: 18px;
  left: 1129px;
  position: absolute;
  top: 722px;
  width: 18px;
}
.frame-2 .oval-mzXdH9 {
  background-color: transparent;
  height: 100px;
  left: 361px;
  position: absolute;
  top: 388px;
  width: 100px;
}
.frame-2 .path-C61RwL {
  background-color: transparent;
  height: 16px;
  left: 659px;
  position: absolute;
  top: 522px;
  width: 16px;
}
.frame-2 .path-VMr6Om {
  background-color: transparent;
  height: 36px;
  left: 393px;
  position: absolute;
  top: 420px;
  width: 36px;
}
.frame-2 .pp1-C61RwL {
  background-color: transparent;
  height: 33px;
  left: 1065px;
  position: absolute;
  top: 820px;
  width: 32px;
}
.frame-2 .rating-5-stars-C61RwL {
  background-color: transparent;
  height: 16px;
  left: 871px;
  position: absolute;
  top: 226px;
  width: 80px;
}
.frame-2 .rectangle-36-C61RwL {
  background-color: var(--coral);
  border-radius: 5.3px;
  height: 3px;
  left: 1087px;
  position: absolute;
  top: 239px;
  width: 3px;
}
.frame-2 .rectangle-37-C61RwL {
  background-color: var(--coral);
  border-radius: 5.3px;
  height: 3px;
  left: 1326px;
  position: absolute;
  top: 230px;
  width: 3px;
}
.frame-2 .rectangle-C61RwL {
  background-color: var(--coral);
  border: 2px solid var(--white);
  border-radius: 7px;
  box-shadow: 0px 2px 4px rgba(68,68,79,0.15);;
  height: 12px;
  left: 1244px;
  position: absolute;
  top: 218px;
  width: 12px;
}
.frame-2 .rectangle-VMr6Om {
  background-color: var(--white);
  border-radius: 91px;
  height: 51px;
  left: 644px;
  position: absolute;
  top: 939px;
  width: 311px;
}
.frame-2 .rectangle-mzXdH9 {
  background-color: transparent;
  height: 58px;
  left: 167px;
  position: absolute;
  top: 837px;
  width: 375px;
}
.frame-2 .rectangle-path-C61RwL {
  background-color: transparent;
  height: 16px;
  left: 361px;
  position: absolute;
  top: 210px;
  width: 4px;
}
.frame-2 .rectangle-path-VMr6Om {
  background-color: transparent;
  height: 16px;
  left: 369px;
  position: absolute;
  top: 210px;
  width: 4px;
}
.frame-2 .sales-C61RwL {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 16px;
  height: auto;
  left: 680px;
  position: absolute;
  text-align: left;
  top: 320px;
  width: 130px;
}
.frame-2 .sales-VMr6Om {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 16px;
  height: auto;
  left: 680px;
  position: absolute;
  text-align: left;
  top: 636px;
  width: 122px;
}
.frame-2 .screen7-C61RwL {
  background-color: transparent;
  height: 90px;
  left: 1057px;
  position: absolute;
  top: 399px;
  width: 375px;
}
.frame-2 .send-C61RwL {
  background-color: transparent;
  color: rgba(88,86,215,1.0);
  font-size: 15px;
  height: 18px;
  left: 450px;
  position: absolute;
  text-align: right;
  top: 858px;
  width: 62px;
}
.frame-2 .shape-2P4qUJ {
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 55px 65px 44px rgba(196,104,77,0.13) , 20px 30px 30px rgba(102,62,51,0.06) , 10px 20px 20px rgba(102,62,51,0.04) , 1px 10px 10px rgba(102,62,51,0.02);;
  height: 94px;
  left: 612px;
  position: absolute;
  top: 482px;
  width: 375px;
}
.frame-2 .shape-5nvjx9 {
  background-color: transparent;
  height: 14px;
  left: 1px;
  position: absolute;
  top: 1px;
  width: 14px;
}
.frame-2 .shape-C61RwL {
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 55px 65px 44px rgba(196,104,77,0.13) , 20px 30px 30px rgba(102,62,51,0.06) , 10px 20px 20px rgba(102,62,51,0.04) , 1px 10px 10px rgba(102,62,51,0.02);;
  height: 144px;
  left: 648px;
  position: absolute;
  top: 298px;
  width: 303px;
}
.frame-2 .shape-HlKRTo {
  background-color: rgba(241,241,245,1.0);
  border-radius: 8.5px;
  height: 6px;
  left: 1089px;
  position: absolute;
  top: 588px;
  width: 266px;
}
.frame-2 .shape-J1YQmd {
  background-color: var(--white);
  border-radius: 24px;
  height: 50px;
  left: 1056px;
  position: absolute;
  top: 811px;
  width: 202px;
}
.frame-2 .shape-N74yAc {
  background-color: transparent;
  height: 14px;
  left: 1px;
  position: absolute;
  top: 1px;
  width: 14px;
}
.frame-2 .shape-NxxnvM {
  background-color: transparent;
  height: 14px;
  left: 1px;
  position: absolute;
  top: 1px;
  width: 14px;
}
.frame-2 .shape-QxM5SU {
  background-color: transparent;
  height: 12px;
  left: 845px;
  position: absolute;
  top: 694px;
  width: 11px;
}
.frame-2 .shape-UWA5Yk {
  background-color: transparent;
  height: 14px;
  left: 1px;
  position: absolute;
  top: 1px;
  width: 14px;
}
.frame-2 .shape-VMr6Om {
  background-color: transparent;
  height: 12px;
  left: 844px;
  position: absolute;
  top: 368px;
  width: 11px;
}
.frame-2 .shape-VkPPtx {
  background-color: var(--coral);
  border-radius: 10px;
  height: 8px;
  left: 1088px;
  position: absolute;
  top: 587px;
  width: 207px;
}
.frame-2 .shape-YWzA7M {
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 55px 65px 44px rgba(196,104,77,0.13) , 20px 30px 30px rgba(102,62,51,0.06) , 10px 20px 20px rgba(102,62,51,0.04) , 1px 10px 10px rgba(102,62,51,0.02);;
  height: 301px;
  left: 280px;
  position: absolute;
  top: 342px;
  width: 262px;
}
.frame-2 .shape-ZCWdq5 {
  background-color: transparent;
  height: 14px;
  left: 1px;
  position: absolute;
  top: 1px;
  width: 14px;
}
.frame-2 .shape-a5WPlX {
  background-color: transparent;
  height: 89px;
  left: 1057px;
  position: absolute;
  top: 529px;
  width: 375px;
}
.frame-2 .shape-mmbFsL {
  background-color: transparent;
  height: 12px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 11px;
}
.frame-2 .shape-mzXdH9 {
  background-color: var(--white);
  border-radius: 24px;
  height: 155px;
  left: 648px;
  position: absolute;
  top: 616px;
  width: 303px;
}
.frame-2 .shape-qr8e7q {
  background-color: transparent;
  height: 12px;
  left: 705px;
  position: absolute;
  top: 535px;
  width: 12px;
}
.frame-2 .size-5nvjx9 {
  background-color: transparent;
  height: 1px;
  left: 8px;
  position: absolute;
  top: 8px;
  width: 1px;
}
.frame-2 .size-N74yAc {
  background-color: transparent;
  height: 1px;
  left: 8px;
  position: absolute;
  top: 8px;
  width: 1px;
}
.frame-2 .size-NxxnvM {
  background-color: transparent;
  height: 1px;
  left: 8px;
  position: absolute;
  top: 8px;
  width: 1px;
}
.frame-2 .size-UWA5Yk {
  background-color: transparent;
  height: 1px;
  left: 8px;
  position: absolute;
  top: 8px;
  width: 1px;
}
.frame-2 .size-ZCWdq5 {
  background-color: transparent;
  height: 1px;
  left: 8px;
  position: absolute;
  top: 8px;
  width: 1px;
}
.frame-2 .state-C61RwL {
  background-color: transparent;
  color: var(--coral);
  font-size: 12px;
  height: auto;
  left: 1279px;
  line-height: 16px;
  position: absolute;
  text-align: left;
  top: 680px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .subscribe---our-fresh-C61RwL {
  background-color: transparent;
  color: var(--white);
  font-size: 14px;
  height: auto;
  left: 644px;
  line-height: 22px;
  position: absolute;
  text-align: left;
  top: 870px;
  width: 282px;
}
.frame-2 .subscribe-C61RwL {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 14px;
  height: 24px;
  left: 859px;
  line-height: 24px;
  position: absolute;
  text-align: left;
  top: 952px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .text-C61RwL {
  background-color: transparent;
  height: 48px;
  left: 407px;
  position: absolute;
  top: 194px;
  width: 479px;
}
.frame-2 .time-C61RwL {
  background-color: transparent;
  color: var(--bombay);
  font-family: 'Montserrat', Helvetica, Arial, serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  height: 13px;
  left: 720px;
  letter-spacing: 0.00px;
  line-height: 13px;
  position: absolute;
  text-align: left;
  top: 535px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .time-VMr6Om {
  background-color: transparent;
  color: var(--bombay);
  font-size: 12px;
  height: auto;
  left: 1169px;
  line-height: 16px;
  position: absolute;
  text-align: left;
  top: 728px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .tittle-C61RwL {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 15px;
  height: 20px;
  left: 704px;
  line-height: 20px;
  position: absolute;
  text-align: left;
  top: 509px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .type-your-email-C61RwL {
  background-color: transparent;
  color: var(--bombay);
  font-size: 14px;
  height: 18px;
  left: 665px;
  line-height: 24px;
  position: absolute;
  text-align: left;
  top: 955px;
  white-space: nowrap;
  width: 162px;
}
.frame-2 .type-your-message-C61RwL {
  background-color: transparent;
  color: var(--bombay);
  font-size: 15px;
  height: 24px;
  left: 199px;
  line-height: 24px;
  position: absolute;
  text-align: left;
  top: 855px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .write-new-card-C61RwL {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 18px;
  height: auto;
  left: 336px;
  position: absolute;
  text-align: center;
  top: 518px;
  width: auto;
}
.frame-2 .x0520-C61RwL {
  background-color: transparent;
  color: var(--white);
  font-size: 14px;
  height: 20px;
  left: 912px;
  line-height: 20px;
  opacity: 0.5;
  position: absolute;
  text-align: right;
  top: 194px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .x10254-C61RwL {
  background-color: transparent;
  color: rgba(18,18,30,1.0);
  font-size: 24px;
  height: auto;
  left: 1087px;
  line-height: 36px;
  position: absolute;
  text-align: left;
  top: 277px;
  white-space: nowrap;
  width: auto;
}
.frame-2 .x15-C61RwL {
  background-color: transparent;
  color: var(--coral);
  font-size: 16px;
  height: auto;
  left: 1274px;
  position: absolute;
  text-align: left;
  top: 280px;
  width: 53px;
}
.frame-2 .x25-C61RwL {
  background-color: transparent;
  color: var(--coral);
  font-size: 16px;
  height: auto;
  left: 794px;
  position: absolute;
  text-align: left;
  top: 363px;
  width: auto;
}
.frame-2 .x25-VMr6Om {
  background-color: transparent;
  color: rgba(70,67,211,1.0);
  font-size: 16px;
  height: auto;
  left: 794px;
  position: absolute;
  text-align: left;
  top: 689px;
  width: auto;
}
.frame-2 .x27632-C61RwL {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 28px;
  height: auto;
  left: 680px;
  position: absolute;
  text-align: left;
  top: 353px;
  width: auto;
}
.frame-2 .x27632-VMr6Om {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 28px;
  height: auto;
  left: 680px;
  position: absolute;
  text-align: left;
  top: 679px;
  width: auto;
}
.frame-2 .x75-C61RwL {
  background-color: transparent;
  color: var(--vulcan);
  font-size: 13px;
  height: auto;
  left: 1373px;
  position: absolute;
  text-align: left;
  top: 581px;
  width: auto;
}
.frame-2 .your-entir--connected-C61RwL {
  background-color: transparent;
  color: var(--bombay);
  font-family: 'Montserrat', Helvetica, Arial, serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  height: auto;
  left: 300px;
  letter-spacing: 0.00px;
  line-height: 22px;
  position: absolute;
  text-align: center;
  top: 553px;
  width: 224px;
}
:root {
  --bombay: rgba(175,175,189,1.0);
  --coral: rgba(254,128,92,1.0);
  --vulcan: rgba(18,18,31,1.0);
  --white: rgba(255,255,255,1.0);
}

frame-2.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1600, maximum-scale=1.0" />
    <link rel="shortcut icon" href="./img/favicon.png" />
    <meta name="og:type" content="website" />
    <meta name="twitter:card" content="photo" />
    <link rel="stylesheet" type="text/css" href="frame-2.css" />
    <style>
      @import url("https://fonts.googleapis.com/css?family=Montserrat:500,600,400|Nunito+Sans:700");
      .anima-component-wrapper a,
      .anima-screen a {
        text-decoration: none;
        display: contents;
      }

      .anima-full-width-a {
        width: 100%;
      }

      .anima-full-height-a {
        height: 100%;
      }

      .anima-screen textarea:focus,
      .anima-screen input:focus {
        outline: none;
      }

      .anima-screen *,
      .anima-component-wrapper * {
        box-sizing: border-box;
      }

      .anima-screen div {
        -webkit-text-size-adjust: none;
      }

      .anima-container-center-vertical,
      .anima-container-center-horizontal {
        pointer-events: none;
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;
      }

      .anima-container-center-vertical {
        align-items: center;
        height: 100%;
      }

      .anima-container-center-horizontal {
        justify-content: center;
        width: 100%;
      }

      .anima-container-center-vertical > *,
      .anima-container-center-horizontal > * {
        pointer-events: auto;
        flex-shrink: 0;
      }

      .anima-component-wrapper,
      .anima-screen {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-all;
        word-break: break-word;
      }

      .anima-auto-animated div {
        opacity: 0;
        position: absolute;
        --anima-z-index: -1;
      }

      .anima-auto-animated .anima-container-center-vertical,
      .anima-auto-animated .anima-container-center-horizontal {
        opacity: 1;
      }

      .anima-overlay {
        position: absolute;
        opacity: 0;
        display: none;
        top: 0;
        width: 100%;
        height: 100%;
        position: fixed;
      }

      .anima-animate-appear {
        opacity: 0;
        display: block;
        animation: anima-reveal 0.3s ease-in-out 1 normal forwards;
      }

      .anima-animate-disappear {
        opacity: 1;
        display: block;
        animation: anima-reveal 0.3s ease-in-out 1 reverse forwards;
      }

      .anima-animate-nodelay {
        animation-delay: 0s;
      }

      @keyframes anima-reveal {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .align-self-flex-start {
        align-self: flex-start;
      }
      .align-self-flex-end {
        align-self: flex-end;
      }
      .align-self-flex-center {
        align-self: center;
      }
      .anima-valign-text-middle {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .anima-valign-text-bottom {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .anima-component-wrapper,
      .anima-component-wrapper * {
        pointer-events: none;
      }

      .anima-component-wrapper a *,
      .anima-component-wrapper a,
      .anima-component-wrapper input,
      .anima-component-wrapper video,
      .anima-component-wrapper iframe,
      .anima-listeners-active,
      .anima-listeners-active * {
        pointer-events: auto;
      }

      .anima-hidden,
      .anima-hidden * {
        visibility: hidden;
        pointer-events: none;
      }

      .anima-smart-layers-pointers,
      .anima-smart-layers-pointers * {
        pointer-events: auto;
        visibility: visible;
      }

      .anima-component-wrapper.anima-not-ready,
      .anima-component-wrapper.anima-not-ready * {
        visibility: hidden !important;
      }

      .anima-listeners-active-click,
      .anima-listeners-active-click * {
        cursor: pointer;
      }
    </style>
    <meta name="author" content="AnimaApp.com - Design to code, Automated." />
  </head>
  <body style="margin: 0; background: rgba(250, 239, 227, 1)">
    <input type="hidden" id="anPageName" name="page" value="frame-2" />
    <div class="anima-container-center-horizontal">
      <div class="frame-2 border-class-1 anima-screen">
        <div class="base-C61RwL"></div>
        <div class="rating-5-stars-C61RwL">
          <div class="feather-icon-star-1-GnKe7e">
            <img class="shape-NxxnvM" src="img/shape@2x.png" />
            <img class="size-NxxnvM" src="img/size@2x.png" />
          </div>
          <div class="feather-icon-star-2-GnKe7e">
            <img class="shape-ZCWdq5" src="img/shape@2x.png" />
            <img class="size-ZCWdq5" src="img/size@2x.png" />
          </div>
          <div class="feather-icon-star-3-GnKe7e">
            <img class="shape-5nvjx9" src="img/shape@2x.png" />
            <img class="size-5nvjx9" src="img/size@2x.png" />
          </div>
          <div class="feather-icon-star-4-GnKe7e">
            <img class="shape-N74yAc" src="img/shape@2x.png" />
            <img class="size-N74yAc" src="img/size@2x.png" />
          </div>
          <div class="feather-icon-star-5-GnKe7e">
            <img class="shape-UWA5Yk" src="img/shape-4@2x.png" />
            <img class="size-UWA5Yk" src="img/size@2x.png" />
          </div>
        </div>
        <div class="x0520-C61RwL anima-valign-text-middle font-class-4 border-class-1">05:20</div>
        <div class="text-C61RwL">
          <div class="mp3-44k-hz-ps-1241-mb-88YoGf font-class-4 border-class-1">mp3, 44kHz, 320kbps, 12.41Mb</div>
          <div class="lifestyle--way-to-row-88YoGf anima-valign-text-middle font-class-1 border-class-1">
            Lifestyle&nbsp;&nbsp;bed | Feat. beabadoobee - Another way to row
          </div>
        </div>
        <img class="base-VMr6Om" src="img/base@2x.png" />
        <img class="rectangle-path-C61RwL" src="img/rectangle-path@2x.png" />
        <img class="rectangle-path-VMr6Om" src="img/rectangle-path@2x.png" />
        <div class="shape-C61RwL"></div>
        <div class="compared-to-21340-C61RwL font-class-2">Compared to ($13850 last year)</div>
        <img class="shape-VMr6Om" src="img/shape-5@2x.png" />
        <div class="x25-C61RwL font-class-1">+8.5%</div>
        <div class="x27632-C61RwL font-class-1">$19840</div>
        <div class="sales-C61RwL font-class-1">Statistics</div>
        <div class="shape-mzXdH9"></div>
        <div class="compared-to-21340-VMr6Om font-class-2">Compared to ($13850 last year)</div>
        <img class="shape-QxM5SU" src="img/shape-6@2x.png" />
        <div class="x25-VMr6Om font-class-1">-3.2%</div>
        <div class="x27632-VMr6Om font-class-1">$12380</div>
        <div class="sales-VMr6Om font-class-1">Statistics</div>
        <div class="shape-2P4qUJ"></div>
        <div class="frame-C61RwL"></div>
        <img class="path-C61RwL" src="img/path@2x.png" />
        <div class="tittle-C61RwL anima-valign-text-middle font-class-1">Thanks for visiting our Blog!</div>
        <div class="time-C61RwL anima-valign-text-middle">Just now</div>
        <img class="shape-qr8e7q" src="img/shape-7@2x.png" />
        <div class="shape-J1YQmd"></div>
        <div class="fawait-C61RwL font-class-2">@akimoto</div>
        <div class="ahmad-nur-fawaid-C61RwL font-class-1">Asa Butterfield</div>
        <img class="pp1-C61RwL" src="img/pp1@2x.png" />
        <img class="oval-C61RwL" src="img/oval@2x.png" />
        <img class="shape-a5WPlX" src="img/shape-8@2x.png" />
        <div class="shape-HlKRTo"></div>
        <div class="shape-VkPPtx"></div>
        <div class="x75-C61RwL font-class-3">75%</div>
        <div class="complete-your-profil-C61RwL font-class-1">Download master - WestByte</div>
        <div class="bg-C61RwL"></div>
        <div class="time-VMr6Om font-class-2">12:40 - 16:00</div>
        <img class="avatar-C61RwL" src="img/avatar@2x.png" />
        <img class="oval-VMr6Om" src="img/oval-1@2x.png" />
        <div class="amelia-minderlow-C61RwL font-class-3">Amelia Minderlow</div>
        <div class="consult-method-C61RwL font-class-3">Figma Design</div>
        <div class="dot-C61RwL"></div>
        <div class="state-C61RwL font-class-3">Founder</div>
        <img class="card-team-C61RwL" src="img/card-team@2x.png" />
        <img class="graph-copy-C61RwL" src="img/graphcopy@2x.png" />
        <img class="graph-C61RwL" src="img/graph@2x.png" />
        <div class="rectangle-37-C61RwL"></div>
        <div class="rectangle-36-C61RwL"></div>
        <div class="rectangle-C61RwL"></div>
        <div class="x10254-C61RwL font-class-1">18,254</div>
        <div class="x15-C61RwL font-class-1">2.5%</div>
        <div class="ic-down-C61RwL"><img class="shape-mmbFsL" src="img/shape-5@2x.png" /></div>
        <img class="screen7-C61RwL" src="img/screen7@2x.png" />
        <div class="bg-VMr6Om"></div>
        <div class="rectangle-VMr6Om"></div>
        <div class="type-your-email-C61RwL anima-valign-text-middle font-class-4 border-class-1">Type your email</div>
        <div class="subscribe-C61RwL anima-valign-text-middle font-class-3 border-class-1">Subscribe</div>
        <div class="line-C61RwL"></div>
        <div class="subscribe---our-fresh-C61RwL font-class-2 border-class-1">
          Subscribe and receive our newsletters to follow the news about our fresh.
        </div>
        <div class="get-a-lovly-app-link-C61RwL border-class-1">Get a Lovly App Link</div>
        <img class="icon-close-C61RwL" src="img/icon-close@2x.png" />
        <div class="shape-YWzA7M"></div>
        <div class="your-entir--connected-C61RwL">Your entire product design workflow — connected</div>
        <div class="write-new-card-C61RwL font-class-1">Write New Card</div>
        <img class="oval-mzXdH9" src="img/oval-2@2x.png" />
        <img class="path-VMr6Om" src="img/path-1@2x.png" />
        <img class="rectangle-mzXdH9" src="img/rectangle@2x.png" />
        <div class="send-C61RwL anima-valign-text-middle font-class-3 border-class-1">Send</div>
        <div class="type-your-message-C61RwL anima-valign-text-middle font-class-4 border-class-1">
          Type your message...
        </div>
        <img class="bg-mzXdH9" src="img/bg@2x.png" />
        <div class="hi-there-w--and-ideas-C61RwL font-class-2 border-class-1">
          Hi there.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We use Boards to share initial goals and ideas.
        </div>
        <img class="hand-C61RwL" src="img/hand@2x.png" />
        <div class="developer-C61RwL font-class-2 border-class-1">Developer</div>
        <div class="emily-dougrer-C61RwL font-class-1 border-class-1">Emily Dougrer</div>
        <img class="image-C61RwL" src="img/image@2x.png" />
        <img class="icon-close-VMr6Om" src="img/icon-close-1@2x.png" />
      </div>
    </div>
  </body>
</html>

Result using React for individual components:
https://codepen.io/elie222/pen/wvWbzxB