diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index f4bb1ae7b3..43b6d81b5a 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -57,19 +57,18 @@ ReactDOM.render(
 .card-container > .ant-tabs-card > .ant-tabs-nav::before {
   display: none;
 }
-.card-container > .ant-tabs-card .ant-tabs-tab {
+.card-container > .ant-tabs-card .ant-tabs-tab,
+[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
   border-color: transparent;
   background: transparent;
 }
-.card-container > .ant-tabs-card .ant-tabs-tab-active {
+.card-container > .ant-tabs-card .ant-tabs-tab-active,
+[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
   border-color: #fff;
   background: #fff;
 }
-```
-
-<style>
 #components-tabs-demo-card-top .code-box-demo {
-  background: #F5F5F5;
+  background: #f5f5f5;
   overflow: hidden;
   padding: 24px;
 }
@@ -77,18 +76,18 @@ ReactDOM.render(
   height: 120px;
   margin-top: -8px;
 }
-[data-theme="dark"] .card-container > .ant-tabs-card .ant-tabs-tab {
+[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
   border-color: transparent;
   background: transparent;
 }
-[data-theme="dark"] #components-tabs-demo-card-top .code-box-demo {
+[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
   background: #000;
 }
-[data-theme="dark"] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
+[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
   background: #141414;
 }
-[data-theme="dark"] .card-container > .ant-tabs-card .ant-tabs-tab-active {
+[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
   border-color: #141414;
   background: #141414;
 }
-</style>
+```