import React from
"react"
;
import
"@blueprintjs/core/lib/css/blueprint.css"
;
function
App() {
return
(
<>
<div style={{
padding: 20, textAlign:
"center"
,
color:
"green"
}}>
<h1>ReactJS BluePrint Colors Color schemes</h1>
</div>
<div>
<h2 style={{ textAlign:
"center"
, color:
"green"
}}>
Diverging Color Scheme
</h2>
<div style={{
padding: 20, display:
"flex"
,
flexDirection:
"row"
}}>
<div style={{
display:
'flex'
, flexDirection:
'column'
,
paddingRight: 10
}}>
<div style={{
backgroundColor:
'#1F4B99'
,
padding: 20,
color:
'white'
}}>
#1F4B99
</div>
<div style={{
backgroundColor:
'#6CACB9'
, padding: 20,
color:
'white'
}}>
#6CACB9
</div>
<div style={{
backgroundColor:
'#FFFFFF'
, padding: 20,
color:
'black'
}}>
#FFFFFF
</div>
<div style={{
backgroundColor:
'#DF9563'
, padding: 20,
color:
'white'
}}>
#DF9563
</div>
<div style={{
backgroundColor:
'#9E2B0E'
, padding: 20,
color:
'white'
}}>
#9E2B0E
</div>
</div>
<div style={{
display:
'flex'
, flexDirection:
'column'
, paddingRight: 10
}}>
<div style={{
backgroundColor:
'#1D7324'
,
padding: 20, color:
'white'
}}>
#1D7324
</div>
<div style={{
backgroundColor:
'#8BAE44'
,
padding: 20, color:
'white'
}}>
#8BAE44
</div>
<div style={{
backgroundColor:
'#FFE39F'
,
padding: 20, color:
'white'
}}>
#FFE39F
</div>
<div style={{
backgroundColor:
'#6B9FA1'
,
padding: 20, color:
'white'
}}>
#6B9FA1
</div>
<div style={{
backgroundColor:
'#1F4B99'
,
padding: 20, color:
'white'
}}>
#1F4B99
</div>
</div>
</div>
</div>
</>
);
}
export
default
App;