[Music] hello and welcome to react twin in this video I'm going to create this beautiful heater section with t CSS and it's fully fully responsive guys let's check the responsiveness you can use this components in your project and uh you will learn how to create this uh beautiful uh cards with teln CSS so uh let's begin I have already created a react project with with if you don't know how to create react project with v I have already uh a video in the channel Let's uh create a new component the component will be heater with card. GSX and our card to add for now hello sorry for the typers now let's import that let's check yes let's I put them side by side let's add some classes class name it will be relative BG will be 900 sorry 900 and py will be 24 same P will 32 and overflow will be hidden and isolate what this isolate mean until when CSS the isolate utility class applies the CSS isolation properties with a value of isolate to an element this create a new stacking context which can help manage stacking and Z index issues in complex layout and the isolate property can take two values Auto and the isolate the auto is a default value which do not create any uh stacking context but the isolate value Force an element to create a new stacking context so remember guys when you apply isolate to an element any child elements with Z index values or contain within this new context preventing them from interfering with elements uh outside this context so let's uh continue I hope you understand that to add an image uh so I want to add uh the source of that image the source of that image is from unsplash.com I have let's add some class names absolute uh and set will be zero uh Z will be 10 -10 uh we height will be full weight will be full and object will be cover in the SM object will be Center and object will be right let's save see guys we have our image background image I want to add another diff CL at first it will be hidden s will be absolute top will be 10 -10 and U same right will be 50% and uh Z will be 10 same Z will be 10 -1 and the margin right will be 10 will be block and SM transform GPU what this transform GPU do it will force the browser to use uh GPU uh instead of uh CPU for transformation now the SM blow will be 3XL it will be self closing diff and add some classes aspect will be 1,800 with will be 6 and PG gradient TR top right and it will be [Music] from hash FF 4 6 994 2 77 uh 6 f f f oh sorry I forgot to add the hash opacity will be 20 let's save added this background gradient and the blur will be 3XL uh now I want to add uh style and add some clip butt proper property I will provide this uh the source code for you if you save now I'm adding another this be abolute top will be 52 it's 52 and left we 50% of the Z will be 10 and translate X will be 1 Point negative transform GPU and SM trans GPU so and the blur will be 3XL and the same top will be 23 r i mean negative negative and uh let add some margin left and translate X will be zero and the SM let's save add another self closing diff class it will it will be with as aspect will be 1,008 it will be 60 R and BG gradient TR R to top right means TR and uh from blue blue 500 to to Indigo 500 let's save and uh on Style at the clip pad property I will provide this for you guys and let's save as you can see guys it has uh gradient pacity will be 20 if you increase yeah now uh let's add another diff first it will be let us some class MX R2 Max with Max WID will be 7 XL and PX will be six and L GPX will be 8 so this div and let's add another div and I want add some class to that M mix Max withd will be 2 XEL M MX will be A2 and LG uh the MX will be zero so add another H2 H want uh Support Center class name text will be for Exel font font will be B text will be white and uh text SM text will be 6 Excel and tracking tight let's save paragraph L 500 margin margin top will be two and text will be LG and leading will be eight also text will be gray 300 that's uh the margin will be six yeah that's great below this diff guys I'm going to add another diff for that class max max will be AO Max WD will be to excel at first um when you reach to SM we have some margin to 20 margin and in the LG MX will be zero um and LG Max WID will be n let's have it's will display will be great get calls one LG great calls Tre g g Gap will be it guys I have added um array of objects uh it has three objects every object has uh the name description and the icons I have used uh react her sorry hero icons you can install hero icon I have used that so let's add for every cards dot Map Card component I'm going to have so another the key will be card. name and let's add some class name it will be flick X and the Gap X will be four and rounded will be 3 XEL and let me P padding will be six rank will be one rank white y 10 and uh ring will be inset so let's uh add like uh a da let's add the the icon I want to create card do icon and class at some class height will be seven and WID will be five text blue 500 to save we have that also I want to add the H3 card. name for the description I will add card. description if you save now I want to add some class text will be white class text will be great 300 and the parent D for the H3 and uh the paragraph at text will be base bading will be 7 font will be bolt I think we are finishing the our component uh let's add some margin top in here the margin top will be two you save yeah uh let's um get full screen I think I have forgot something in here uh Flex none yeah see guys uh let's check the responsive it's responsive why did I think I forgot yeah let's check yeah it is MX will be Auto now see guys thank you guys for watching if you have any question suggestion let me know in the comment down below see you in the next video