diff --git a/developers/guides/get-engagement-analytics-via-api.mdx b/developers/guides/get-engagement-analytics-via-api.mdx
index 4395b073b..96f58eb8c 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 bd35771f3..b9f96dabd 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 f50b7718e..13a9f1d29 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 98e856c6d..32206ecb5 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 166b9afbe..c9d65bbde 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 ef3022ae7..e4cd7cab6 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 23cbdc7f8..306c72f83 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 9588a39cf..929db1b05 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 1da805147..4df30fe1d 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 b7c6af245..884f21adc 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 b40d5ac5f..730e6e6d3 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 3a223a2c2..278716ea0 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 f19fec77e..78015aedb 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 432fd70ef..3c0fc9721 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 b9aba83ff..5a17835ae 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 dc6f88d06..c6dc7b3a8 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 605e24232..35f195e46 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 a3ede5aa3..355c561c5 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 4207ae249..a09c7945f 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 d89ec4e24..43f046d6a 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 4bb984bdc..d4f1f35c8 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 52e209a78..ae6430d09 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 bd816a88e..64ee15cf9 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 c62c70282..8b9511e86 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 c1b9bef29..87efc6c78 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 4092fc6bb..5dc98e438 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 88e45e97d..fb16f2ef3 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 6e1c2c123..061822d7f 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 ce3787ecb..d70269535 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 127700d88..fe57f866c 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 652eb765a..d1fe7c3e0 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 9ac367c8b..00efd8ee7 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 f77c7514c..d8f71aa52 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 dae2de7bf..6b515ebd9 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 57a98f80a..d6abf19ce 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 f80585ea6..f6403cb52 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 471dfed40..8f6487e20 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>