diff --git a/developers/guides/get-engagement-analytics-via-api.mdx b/developers/guides/get-engagement-analytics-via-api.mdx
index 4395b073..96f58eb8 100644
--- a/developers/guides/get-engagement-analytics-via-api.mdx
+++ b/developers/guides/get-engagement-analytics-via-api.mdx
@@ -159,7 +159,7 @@ export default function VideoPlayer() {
       controls
       ref={ref}
       src={source}
-      style={{ width: "100%", maxWidth: "500px" }}
+      className="w-full max-w-[500px]"
     />
   );
 }
diff --git a/sdks/react/broadcast/Audio.mdx b/sdks/react/broadcast/Audio.mdx
index bd35771f..b9f96dab 100644
--- a/sdks/react/broadcast/Audio.mdx
+++ b/sdks/react/broadcast/Audio.mdx
@@ -13,10 +13,7 @@ icon: microphone-stand
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Camera.mdx b/sdks/react/broadcast/Camera.mdx
index f50b7718..13a9f1d2 100644
--- a/sdks/react/broadcast/Camera.mdx
+++ b/sdks/react/broadcast/Camera.mdx
@@ -14,10 +14,7 @@ icon: camcorder
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Container.mdx b/sdks/react/broadcast/Container.mdx
index 98e856c6..32206ecb 100644
--- a/sdks/react/broadcast/Container.mdx
+++ b/sdks/react/broadcast/Container.mdx
@@ -13,10 +13,7 @@ icon: tv
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Controls.mdx b/sdks/react/broadcast/Controls.mdx
index 166b9afb..c9d65bbd 100644
--- a/sdks/react/broadcast/Controls.mdx
+++ b/sdks/react/broadcast/Controls.mdx
@@ -13,10 +13,7 @@ icon: gamepad
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Enabled.mdx b/sdks/react/broadcast/Enabled.mdx
index ef3022ae..e4cd7cab 100644
--- a/sdks/react/broadcast/Enabled.mdx
+++ b/sdks/react/broadcast/Enabled.mdx
@@ -14,10 +14,7 @@ icon: clapperboard
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Error.mdx b/sdks/react/broadcast/Error.mdx
index 23cbdc7f..306c72f8 100644
--- a/sdks/react/broadcast/Error.mdx
+++ b/sdks/react/broadcast/Error.mdx
@@ -13,10 +13,7 @@ icon: triangle-exclamation
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Fullscreen.mdx b/sdks/react/broadcast/Fullscreen.mdx
index 9588a39c..929db1b0 100644
--- a/sdks/react/broadcast/Fullscreen.mdx
+++ b/sdks/react/broadcast/Fullscreen.mdx
@@ -13,10 +13,7 @@ icon: expand
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+className="rounded-[10px] bg-black"
 />
 
 ## Features
diff --git a/sdks/react/broadcast/Loading.mdx b/sdks/react/broadcast/Loading.mdx
index 1da80514..4df30fe1 100644
--- a/sdks/react/broadcast/Loading.mdx
+++ b/sdks/react/broadcast/Loading.mdx
@@ -13,10 +13,7 @@ icon: spinner
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/PictureInPicture.mdx b/sdks/react/broadcast/PictureInPicture.mdx
index b7c6af24..884f21ad 100644
--- a/sdks/react/broadcast/PictureInPicture.mdx
+++ b/sdks/react/broadcast/PictureInPicture.mdx
@@ -12,10 +12,7 @@ icon: clone
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
 />
 
 ## Features
diff --git a/sdks/react/broadcast/Portal.mdx b/sdks/react/broadcast/Portal.mdx
index b40d5ac5..730e6e6d 100644
--- a/sdks/react/broadcast/Portal.mdx
+++ b/sdks/react/broadcast/Portal.mdx
@@ -13,10 +13,7 @@ icon: person-to-portal
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Root.mdx b/sdks/react/broadcast/Root.mdx
index 3a223a2c..278716ea 100644
--- a/sdks/react/broadcast/Root.mdx
+++ b/sdks/react/broadcast/Root.mdx
@@ -12,10 +12,7 @@ icon: flag-checkered
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Screenshare.mdx b/sdks/react/broadcast/Screenshare.mdx
index f19fec77..78015aed 100644
--- a/sdks/react/broadcast/Screenshare.mdx
+++ b/sdks/react/broadcast/Screenshare.mdx
@@ -13,10 +13,7 @@ icon: screencast
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
 />
 
 ## Features
diff --git a/sdks/react/broadcast/Source.mdx b/sdks/react/broadcast/Source.mdx
index 432fd70e..3c0fc972 100644
--- a/sdks/react/broadcast/Source.mdx
+++ b/sdks/react/broadcast/Source.mdx
@@ -13,10 +13,7 @@ icon: sliders
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
 />
 
 <Info>
diff --git a/sdks/react/broadcast/Status.mdx b/sdks/react/broadcast/Status.mdx
index b9aba83f..5a17835a 100644
--- a/sdks/react/broadcast/Status.mdx
+++ b/sdks/react/broadcast/Status.mdx
@@ -13,10 +13,7 @@ icon: wave-pulse
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
 />
 
 ## Features
diff --git a/sdks/react/broadcast/Video.mdx b/sdks/react/broadcast/Video.mdx
index dc6f88d0..c6dc7b3a 100644
--- a/sdks/react/broadcast/Video.mdx
+++ b/sdks/react/broadcast/Video.mdx
@@ -12,10 +12,8 @@ icon: video
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Warning>
diff --git a/sdks/react/broadcast/useBroadcastContext.mdx b/sdks/react/broadcast/useBroadcastContext.mdx
index 605e2423..35f195e4 100644
--- a/sdks/react/broadcast/useBroadcastContext.mdx
+++ b/sdks/react/broadcast/useBroadcastContext.mdx
@@ -13,10 +13,8 @@ icon: database
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/getting-started.mdx b/sdks/react/getting-started.mdx
index a3ede5aa..355c561c 100644
--- a/sdks/react/getting-started.mdx
+++ b/sdks/react/getting-started.mdx
@@ -32,10 +32,7 @@ streaming button.
       frameBorder="0"
       allowFullScreen
       allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-      style={{
-        borderRadius: 10,
-        backgroundColor: "black",
-      }}
+      className="rounded-[10px] bg-black"
     />
   </Tab>
   <Tab title="Broadcast.tsx">
@@ -46,10 +43,7 @@ streaming button.
       frameBorder="0"
       allowFullScreen
       allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-      style={{
-        borderRadius: 10,
-        backgroundColor: "black",
-      }}
+      className="rounded-[10px] bg-black"
     />
   </Tab>
 </Tabs>
diff --git a/sdks/react/player/Clip.mdx b/sdks/react/player/Clip.mdx
index 4207ae24..a09c7945 100644
--- a/sdks/react/player/Clip.mdx
+++ b/sdks/react/player/Clip.mdx
@@ -13,10 +13,8 @@ icon: scissors
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Container.mdx b/sdks/react/player/Container.mdx
index d89ec4e2..43f046d6 100644
--- a/sdks/react/player/Container.mdx
+++ b/sdks/react/player/Container.mdx
@@ -13,10 +13,8 @@ icon: tv
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Controls.mdx b/sdks/react/player/Controls.mdx
index 4bb984bd..d4f1f35c 100644
--- a/sdks/react/player/Controls.mdx
+++ b/sdks/react/player/Controls.mdx
@@ -13,10 +13,8 @@ icon: gamepad
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Error.mdx b/sdks/react/player/Error.mdx
index 52e209a7..ae6430d0 100644
--- a/sdks/react/player/Error.mdx
+++ b/sdks/react/player/Error.mdx
@@ -13,10 +13,8 @@ icon: triangle-exclamation
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Fullscreen.mdx b/sdks/react/player/Fullscreen.mdx
index bd816a88..64ee15cf 100644
--- a/sdks/react/player/Fullscreen.mdx
+++ b/sdks/react/player/Fullscreen.mdx
@@ -13,10 +13,8 @@ icon: expand
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
+
 />
 
 ## Features
diff --git a/sdks/react/player/Live.mdx b/sdks/react/player/Live.mdx
index c62c7028..8b9511e8 100644
--- a/sdks/react/player/Live.mdx
+++ b/sdks/react/player/Live.mdx
@@ -13,10 +13,8 @@ icon: headset
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Loading.mdx b/sdks/react/player/Loading.mdx
index c1b9bef2..87efc6c7 100644
--- a/sdks/react/player/Loading.mdx
+++ b/sdks/react/player/Loading.mdx
@@ -13,10 +13,8 @@ icon: spinner
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/PictureInPicture.mdx b/sdks/react/player/PictureInPicture.mdx
index 4092fc6b..5dc98e43 100644
--- a/sdks/react/player/PictureInPicture.mdx
+++ b/sdks/react/player/PictureInPicture.mdx
@@ -12,10 +12,8 @@ icon: clone
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 ## Features
diff --git a/sdks/react/player/Play.mdx b/sdks/react/player/Play.mdx
index 88e45e97..fb16f2ef 100644
--- a/sdks/react/player/Play.mdx
+++ b/sdks/react/player/Play.mdx
@@ -13,10 +13,8 @@ icon: play
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Portal.mdx b/sdks/react/player/Portal.mdx
index 6e1c2c12..061822d7 100644
--- a/sdks/react/player/Portal.mdx
+++ b/sdks/react/player/Portal.mdx
@@ -13,10 +13,8 @@ icon: person-to-portal
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Poster.mdx b/sdks/react/player/Poster.mdx
index ce3787ec..d7026953 100644
--- a/sdks/react/player/Poster.mdx
+++ b/sdks/react/player/Poster.mdx
@@ -13,10 +13,8 @@ icon: image
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/RateSelect.mdx b/sdks/react/player/RateSelect.mdx
index 127700d8..fe57f866 100644
--- a/sdks/react/player/RateSelect.mdx
+++ b/sdks/react/player/RateSelect.mdx
@@ -13,10 +13,8 @@ icon: gauge-simple-high
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Root.mdx b/sdks/react/player/Root.mdx
index 652eb765..d1fe7c3e 100644
--- a/sdks/react/player/Root.mdx
+++ b/sdks/react/player/Root.mdx
@@ -12,10 +12,8 @@ icon: flag-checkered
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Seek.mdx b/sdks/react/player/Seek.mdx
index 9ac367c8..00efd8ee 100644
--- a/sdks/react/player/Seek.mdx
+++ b/sdks/react/player/Seek.mdx
@@ -13,10 +13,8 @@ icon: forward
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+  className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Time.mdx b/sdks/react/player/Time.mdx
index f77c7514..d8f71aa5 100644
--- a/sdks/react/player/Time.mdx
+++ b/sdks/react/player/Time.mdx
@@ -12,10 +12,8 @@ icon: clock
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 ## Features
diff --git a/sdks/react/player/Video.mdx b/sdks/react/player/Video.mdx
index dae2de7b..6b515ebd 100644
--- a/sdks/react/player/Video.mdx
+++ b/sdks/react/player/Video.mdx
@@ -12,10 +12,8 @@ icon: video
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 #### Features
diff --git a/sdks/react/player/VideoQualitySelect.mdx b/sdks/react/player/VideoQualitySelect.mdx
index 57a98f80..d6abf19c 100644
--- a/sdks/react/player/VideoQualitySelect.mdx
+++ b/sdks/react/player/VideoQualitySelect.mdx
@@ -13,10 +13,8 @@ icon: signal
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/Volume.mdx b/sdks/react/player/Volume.mdx
index f80585ea..f6403cb5 100644
--- a/sdks/react/player/Volume.mdx
+++ b/sdks/react/player/Volume.mdx
@@ -13,10 +13,8 @@ icon: volume-high
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>
diff --git a/sdks/react/player/useMediaContext.mdx b/sdks/react/player/useMediaContext.mdx
index 471dfed4..8f6487e2 100644
--- a/sdks/react/player/useMediaContext.mdx
+++ b/sdks/react/player/useMediaContext.mdx
@@ -13,10 +13,8 @@ icon: database
   frameBorder="0"
   allowFullScreen
   allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
-  style={{
-    borderRadius: 10,
-    backgroundColor: "black",
-  }}
+ className="rounded-[10px] bg-black"
+
 />
 
 <Info>